/***********************************************************************************************************************************************************************************************************/
/*Import Mixins*/
/***********************************************************************************************************************************************************************************************************/
/*Import*/
/***********************************************************************************************************************************************************************************************************/
/*Page Header*/
/*Page Header*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Step by step future framework*/
/*Step by step future framework*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Global Wrapper*/
/*Global Wrapper*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Global Side Nav*/
/*_ Side Nav Header*/
/*_ Side Nav Header*/
/*_ Navigation Menu*/
/*_ _subNavMenuIconWrap_RoClass, activeSubNavMenuIconWrap_RoClass*/
/*_ _subNavMenuIconWrap_RoClass, activeSubNavMenuIconWrap_RoClass*/
/*_ _subNavMenuWrap_RoClass (For first level)*/
/*_ _subNavMenuWrap_RoClass (For first level)*/
/*_ _subNavMenu_RoClass*/
/*_ _subNavMenu_RoClass*/
/*_ _subNavMenu_RoClass, activeSubNavMenu_RoClass*/
/*_ _subNavMenu_RoClass, activeSubNavMenu_RoClass*/
/*_ _subNavMenu_RoClass, activeSubNavMenu_RoClass*/
/*_ _subNavMenu_RoClass, activeSubNavMenu_RoClass*/
/*_ _chevronIconWrap_RoClass*/
/*_ _chevronIconWrap_RoClass*/
/*_Navigation Menu*/
/*Global Side Nav*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Global Office Page Header*/
/*Global Office Page Header*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Global top navigation wwrapper*/
/*Global top navigation wwrapper*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Title label*/
/*Title label*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Rogrid Library*/
/*_Checkbox*/
/*_Checkbox*/
/*_ Modal*/
/*_ Modal*/
/*_ Input field*/
/*_ Input field*/
/*_ Normal Button*/
/*_ Normal Button*/
/*_ Notification*/
/*_ Notification*/
/*_ Select Dropdown*/
/*_ _ selectDropdownWrap_RoClass*/
/*_ _ selectDropdownWrap_RoClass*/
/*_ _ selectDropdownWrap_RoClass, searchOpts_RoClass*/
/*_ _ selectDropdownWrap_RoClass, searchOpts_RoClass*/
/*_ _ displayedSelectedFlex_RoClass, selectDropdownOptionsWrap_RoClass*/
/*_ _ displayedSelectedFlex_RoClass, selectDropdownOptionsWrap_RoClass*/
/*_ _ displayedSelectedIcon_RoClass, optIcon_RoClass*/
/*_ _ displayedSelectedIcon_RoClass, optIcon_RoClass*/
/*_ _ displayedSelectedText_RoClass, optText_RoClass, searchOpts_RoClass*/
/*_ _ displayedSelectedText_RoClass, optText_RoClass, searchOpts_RoClass*/
/*_ _ displayedSelectedText_RoClass, optText_RoClass*/
/*_ _ displayedSelectedText_RoClass, optText_RoClass*/
/*_ _ displayedSelectedChevron_RoClass*/
/*_ _ displayedSelectedChevron_RoClass*/
/*_ _ searchOpts_RoClass*/
/*_ _ searchOpts_RoClass*/
/*_ _ selectDropdownOpt_RoClass*/
/*_ _ selectDropdownOpt_RoClass*/
/*_ _ selectDropdownOptionsWrap_RoClass*/
/*_ _ selectDropdownOptionsWrap_RoClass*/
/*_ _displayedSelectedResetBtn_RoClass*/
/*_ _displayedSelectedResetBtn_RoClass*/
/*_ Select Dropdown*/
/*_Box Loader*/
/*_ _boxLoaderIcon_RoClass*/
/*_ _boxLoaderIcon_RoClass*/
/*_Box Loader*/
/*Rogrid Library*/
/***********************************************************************************************************************************************************************************************************/
/*Import*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Import*/
/***********************************************************************************************************************************************************************************************************/
/*From another mixin*/
/***********************************************************************************************************************************************************************************************************/
/*Image itself Style Rogrid Mixin*/
/*Image itself Style Rogrid Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Body Style Rogrid Mixin*/
/*_Body itself*/
/*_Body itself*/
/*_Body scrollbar*/
/*_Body scrollbar*/
/*_Body track*/
/*_Body track*/
/*_Body handle*/
/*_Body handle*/
/*_Body handle hover*/
/*_Body handle hover*/
/*Body Style Rogrid Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Custom Inputs Wrapper, Placeholder & Inputs itself Rogrid Mixin*/
/*_Custom Inputs Wrapper*/
/*_Custom Inputs Wrapper*/
/*_Inputs themselves*/
/*_Inputs themselves*/
/*_Default Placehoder properties*/
/*_Default Placehoder properties*/
/*_Default Placehoder(For Date & Drowpdown) properties*/
/*_Default Placehoder(For Date & Dropdown) properties*/
/*_Animated Placeholder*/
/*_Animated Placeholder*/
/*Custom Inputs Wrapper, Placeholder & Inputs itself Rogrid Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Current Date Rogrid Mixin*/
/*Current Date Rogrid Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Custom checkbox Rogrid Mixin*/
/*Custom checkbox Rogrid Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Custom Modal and Blurrer Rogrid Mixin*/
/*_Blurrer*/
/*_Blurrer*/
/*_Modal*/
/*_Modal*/
/*Custom Modal and Blurrer Rogrid Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Spinner Loading RoGrid Mixin*/
/*Spinner Loading RoGrid Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Search Input with Style RoGrid Mixin*/
/*Search Input with Style RoGrid Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Notification Box Rogrid Mixin*/
/*Notification Box Rogrid Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Customized Normal Button Rogrid Mixin*/
/*Customized Normal Button Rogrid Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*For Icon Only Button Rogrid Mixin*/
/*For Icon Only Button Rogrid Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*For Gridbox Rogrid Mixin*/
/*_For flexbox with hori space between and center for mobile/tablet*/
/*_For flexbox with hori space between and center for mobile/tablet*/
/*_For flexbox wrap item with hori flex start and center for mobile/table*/
/*_For flexbox wrap item with hori flex start and center for mobile/table*/
/*_For flexbox with hori center and center for mobile/tablet*/
/*_For flexbox with hori center and center for mobile/tablet*/
/*_For flexbox with hori flex start for mobile to desktop and flow column when mobile and tablet*/
/*_For flexbox with hori flex start for mobile to desktop and flow column when mobile and tablet*/
/*For Gridbox Rogrid Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*For Custom Radio Button Rogrid Mixin*/
/*For Custom Radio Button Rogrid Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*For Calendar Lite Rogrid Mixin*/
/*For Calendar Lite Rogrid Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*For Custom Dropdown Button List Rogrid Mixin*/
/*For Custom Dropdown Button List Rogrid Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Date Range*/
/*Date Range*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Select Dropdown*/
/*Select Dropdown*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Box Loader*/
/*Box Loader*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Chart Wrapper*/
/*Chart Wrapper*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Layout one made Rogrid Mixin*/
/*_Flex Items wrapper*/
/*_Flex Items wrapper*/
/*_Left Side Wrapper*/
/*_Left Side Wrapper*/
/*_Main Side Wrapper*/
/*_Main Side Wrapper*/
/*_Left side Content*/
/*_Left side Content*/
/*_Navigation Menu*/
/*_Navigation Menu*/
/*_Navigation Menus From Collapse or Sub Menu*/
/*_Navigation Menus From Collapse or Sub Menu*/
/*_Burger*/
/*_Burger*/
/*_Navigation Menu Icon*/
/*_Navigation Menu Icon*/
/*_Main side content*/
/*_Main side content*/
/*_Main side project title*/
/*_Main side project title*/
/*_Project Title and Login User Details*/
/*_Project Title and Login User Details*/
/*Layout one Rogrid Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Footer Rogrid Mixin*/
/*Footer Rogrid Mixin*/
/***********************************************************************************************************************************************************************************************************/
/*From another mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Body Style RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/*General Media*/
body {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  overflow: auto; }

/* width */
body::-webkit-scrollbar {
  width: 7px;
  height: 7px; }

/* Track */
body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px gray;
  border-radius: 10px; }

/* Handle */
body::-webkit-scrollbar-thumb {
  background: #57DBFF;
  border-radius: 10px; }

/* Handle on hover */
body::-webkit-scrollbar-thumb:hover {
  background: #91DBFF; }

/*General Media*/
/***********************************************************************************************************************************************************************************************************/
/*Body Style RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Custom Inputs RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/*General Media*/
div.cusInputs_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  width: auto;
  padding: 15px 5px 5px 5px;
  border-radius: 7px;
  border-color: var(--customInputColor);
  /*To be changed animation*/
  border-width: 1px;
  border-style: solid;
  z-index: 0; }

div.cusInputs_RoClass > input {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  border: none;
  outline: none;
  font-family: calibri;
  font-weight: normal;
  font-style: normal;
  font-size: var(--customInputFSize);
  background: transparent;
  color: var(--customInputColor); }

div.cusInputs_RoClass > select {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  border: none;
  outline: none;
  font-family: calibri;
  font-weight: normal;
  font-style: normal;
  font-size: var(--customInputFSize);
  background: transparent;
  color: var(--customInputColor); }

div.cusInputs_RoClass > .placeholdme_RoClass {
  position: absolute;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  width: 95%;
  top: 50%;
  /*To be changed animation*/
  transform: translateY(-50%);
  /*To be changed animation*/
  font-family: calibri;
  font-style: normal;
  font-weight: normal;
  font-size: var(--customInputFSize);
  /*To be changed animation*/
  color: var(--customInputColor);
  /*To be changed animation*/
  z-index: -1;
  transition: top 0.1s linear 0s, font-size 0.1s linear 0s;
  text-overflow: ellipsis; }

div.cusInputs_RoClass > .upPlaceholdme_RoClass {
  position: absolute;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  width: 95%;
  top: 33%;
  /*To be changed animation*/
  /*To be changed*/
  transform: translateY(-50%);
  /*To be changed animation*/
  font-family: calibri;
  font-style: normal;
  font-weight: normal;
  font-size: var(--customInputFSize);
  /*To be changed animation*/
  color: var(--customInputColor);
  /*To be changed animation*/
  z-index: -1;
  transition: top 0.1s linear 0s, font-size 0.1s linear 0s;
  text-overflow: ellipsis; }

div.cusInputs_RoClass > input:focus + .placeholdme_RoClass,
div.cusInputs_RoClass > input:not(:focus):valid + .placeholdme_RoClass {
  top: 0px;
  /*changed animation*/
  transform: none;
  /*changed animation*/
  font-size: var(--customInputAnimFSize);
  /*changed animation*/ }

div.cusInputs_RoClass > input:focus + .upPlaceholdme_RoClass,
div.cusInputs_RoClass > input:not(:focus):valid + .upPlaceholdme_RoClass {
  top: 0px;
  /*changed animation*/
  transform: none;
  /*changed animation*/
  font-size: var(--customInputAnimFSize);
  /*changed animation*/ }

div.cusInputs_RoClass > select:focus + .placeholdme_RoClass,
div.cusInputs_RoClass > select:not(:focus):valid + .placeholdme_RoClass {
  top: 0px;
  /*changed animation*/
  transform: none;
  /*changed animation*/
  font-size: var(--customInputAnimFSize);
  /*changed animation*/ }

/*General Media*/
/***********************************************************************************************************************************************************************************************************/
/*Custom Inputs RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Current Date RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/*General Media*/
.currentDate_RoClass {
  position: relative;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  white-space: normal;
  word-break: keep-all;
  font-style: var(--currDateFStyle);
  font-weight: var(--currDateFWeight);
  font-size: var(--currDateFsize);
  font-family: calibri;
  color: var(--currDateFColor); }

/*General Media*/
/***********************************************************************************************************************************************************************************************************/
/*Current Date RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Custom Checkbox RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/*General Media*/
.cusCheckBoxPaper_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  width: auto; }

.cusCheckBoxPaper_RoClass > label {
  position: relative;
  display: block;
  box-sizing: border-box;
  overflow: visible;
  width: auto;
  white-space: normal;
  cursor: pointer;
  font-family: calibri;
  font-style: var(--cusCheckboxFStyle);
  font-weight: var(--cusCheckboxFWeight);
  font-size: var(--custCheckboxFSize);
  color: var(--cusCheckboxColor); }

.cusCheckBoxPaper_RoClass > input {
  position: absolute;
  visibility: hidden; }

.cusCheckBoxPaper_RoClass > label > div.boxme_RoClass {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  overflow: visible;
  width: var(--cusCheckboxWidthHeight);
  height: var(--cusCheckboxWidthHeight);
  margin-left: 4px;
  border-width: var(--cusCheckboxBorderWidth);
  border-style: solid;
  border-color: var(--cusCheckboxBorderColor);
  vertical-align: bottom; }

.cusCheckBoxPaper_RoClass > label > div.boxme_RoClass > img {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  visibility: hidden; }

/*General Media*/
/***********************************************************************************************************************************************************************************************************/
/*Custom Checkbox RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Custom Modal RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/*General media*/
/*Blurrer*/
.thisIsJapan_RoClass {
  position: fixed;
  display: none;
  box-sizing: border-box;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: gray;
  opacity: 0.5;
  z-index: var(--putOnTop); }

/*Blurrer*/
/*Modal Container*/
.modalmeCon_RoClass {
  position: fixed;
  display: none;
  overflow: auto;
  box-sizing: border-box;
  border: 1px solid grey;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0px;
  height: 0px;
  background-color: rgba(237, 231, 225, 0.5);
  z-index: var(--topOnBlurrer);
  flex-flow: column nowrap;
  align-items: center;
  transition: width 0.5s ease-out 0s, height 0.5s ease-out 1s; }

/*Modal Container*/
/*Custom Modal itself*/
.modalme_RoClass {
  position: absolute;
  display: none;
  box-sizing: border-box;
  overflow: hidden;
  width: var(--modalWidth);
  height: var(--modalHeight);
  top: var(--modalTop);
  border-radius: 7px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--modalBorderColor);
  background-color: var(--modalBodyBgColor);
  transition: top 0.5s ease-out 0s;
  flex-shrink: 0;
  transform: scale(0);
  transition: transform 0.3s ease-out 1.5s; }

.modalme_RoClass > .modalHeader_RoClass {
  position: relative;
  display: flex;
  box-sizing: border-box;
  overflow: visible;
  width: auto;
  top: 0px;
  flex-wrap: nowrap;
  flex-direction: row;
  background-color: var(--modalHeaderBgColor); }

.modalme_RoClass > .modalBody_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: auto;
  width: auto;
  padding: 8px; }

/* width */
.modalBody_RoClass::-webkit-scrollbar {
  width: 7px;
  height: 7px; }

/* Track */
.modalBody_RoClass::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px gray;
  border-radius: 10px; }

/* Handle */
.modalBody_RoClass::-webkit-scrollbar-thumb {
  background: #57DBFF;
  border-radius: 10px; }

/* Handle on hover */
.modalBody_RoClass::-webkit-scrollbar-thumb:hover {
  background: #91DBFF; }

.modalme_RoClass > .modalHeader_RoClass > .modalHeadTxt_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  white-space: normal;
  word-break: keep-all;
  width: 100%;
  flex-shrink: 1;
  flex-grow: 0;
  font-style: normal;
  font-weight: bold;
  font-size: var(--modalHeaderFSize);
  font-family: calibri;
  color: var(--modalHeaderFColor);
  text-align: center;
  align-self: center; }

.modalme_RoClass > .modalHeader_RoClass > .modalHeadClose_RoClass {
  position: relative;
  display: block;
  box-sizing: border-box;
  overflow: visible;
  white-space: nowrap;
  width: var(--modalCloseIconSize);
  height: var(--modalCloseIconSize);
  align-self: flex-start;
  flex-shrink: 0;
  flex-grow: 0;
  cursor: pointer; }

.modalme_RoClass > .modalHeader_RoClass > .modalHeadClose_RoClass > img {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%; }

/*Custom Modal itself*/
/*General media*/
/***********************************************************************************************************************************************************************************************************/
/*Custom Modal RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Spinner Loading RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/*General Medial*/
.spinnerLoad_RoClass {
  position: fixed;
  display: none;
  box-sizing: border-box;
  overflow: visible;
  white-space: normal;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--topSpinBlurrer);
  width: var(--spinnerWidthHeight);
  height: var(--spinnerWidthHeight); }

.spinnerLoad_RoClass > img {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%; }

/*General Medial*/
/***********************************************************************************************************************************************************************************************************/
/*Spinner Loading RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Search Input with Style RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/*General Media*/
input.searchInput_RoClass {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: var(--inputSearchWidth);
  padding-top: var(--inputSearchTopPadding);
  padding-right: var(--inputSearchRightPadding);
  padding-bottom: var(--inputSearchBottomPadding);
  padding-left: var(--inputSearchLeftPadding);
  border-style: solid;
  border-width: 1px;
  border-color: var(--inputSearchBorderColor);
  border-radius: var(--inputSearchBorderRadius);
  outline: none;
  background: transparent var(--inputSearchIcon) var(--inputSearchIconHori) center no-repeat;
  background-size: var(--inputSearchIconSize);
  background-origin: padding-box;
  font-style: normal;
  font-weight: normal;
  font-family: calibri;
  font-size: var(--inputSearchFSize);
  color: var(--inputSearchFColor); }

/*General Media*/
/***********************************************************************************************************************************************************************************************************/
/*Search Input with Style RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Notification Box RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/*General Media*/
/*_Success Notification Box*/
.notifyFlex_Suc_RoClass {
  position: relative;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  flex-flow: row nowrap;
  width: auto;
  padding: 7px;
  margin: 4px;
  background-color: #DFF0D8; }

.notifyFlex_Suc_RoClass > .notifyMessItem_Suc_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  white-space: normal;
  word-break: keep-all;
  flex-shrink: 1;
  width: 100%;
  font-family: calibri;
  font-style: normal;
  font-weight: normal;
  font-size: var(--notiFSize);
  color: #3C763D; }

.notifyFlex_Suc_RoClass > .notifyCloseItem_Suc_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  flex-shrink: 0;
  width: var(--notiCloseIconWidthHeight);
  height: var(--notiCloseIconWidthHeight);
  cursor: pointer; }

.notifyFlex_Suc_RoClass > .notifyCloseItem_Suc_RoClass > img {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%; }

/*_Success Notification Box*/
/*_Failed Notification Box*/
.notifyFlex_Failed_RoClass {
  position: relative;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  flex-flow: row nowrap;
  width: auto;
  padding: 7px;
  margin: 4px;
  background-color: #F2DEDE; }

.notifyFlex_Failed_RoClass > .notifyMessItem_Failed_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  white-space: normal;
  word-break: keep-all;
  flex-shrink: 1;
  width: 100%;
  font-family: calibri;
  font-style: normal;
  font-weight: normal;
  font-size: var(--notiFSize);
  color: #A94442; }

.notifyFlex_Failed_RoClass > .notifyCloseItem_Failed_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  flex-shrink: 0;
  width: var(--notiCloseIconWidthHeight);
  height: var(--notiCloseIconWidthHeight);
  cursor: pointer; }

.notifyFlex_Failed_RoClass > .notifyCloseItem_Failed_RoClass > img {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%; }

/*_Failed Notification Box*/
/*General Media*/
/***********************************************************************************************************************************************************************************************************/
/*Notification Box RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Normal Custom Button RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/*General Medial*/
.normButton_RoClass {
  position: relative;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  white-space: normal;
  word-break: keep-all;
  width: var(--normBtnWidth);
  padding: var(--normBtnPadding);
  border-style: solid;
  border-width: var(--normBtnBorderWidth);
  border-color: var(--normBtnBorderColor);
  border-radius: var(--normBtnRadius);
  outline: none;
  font-style: normal;
  font-weight: var(--normBtnFWeight);
  font-family: calibri;
  font-size: var(--normBtnFSize);
  background-color: var(--normBtnBgColor);
  color: var(--normBtnFcolor);
  cursor: pointer; }

.normButton_RoClass:hover {
  color: var(--normBtnHovActFColor);
  background-color: var(--normBtnHovActBgColor); }

.normButton_RoClass:active {
  color: var(--normBtnHovActFColor);
  background-color: var(--normBtnHovActBgColor); }

/*General Medial*/
/***********************************************************************************************************************************************************************************************************/
/*Normal Custom Button RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Icon Button Only RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/*General Media*/
button.iconBtn_RoClass {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: var(--iconBtnWidth);
  height: var(--iconBtnHeight);
  background-color: var(--iconBtnBgColor);
  background-image: var(--iconBtnBgIcon);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: var(--iconBtnBgSize);
  background-origin: padding-box;
  border-style: solid;
  border-width: var(--iconBtnBorderWidth);
  border-color: var(--iconBtnBorderColor);
  border-radius: var(--iconBtnBorderRadius);
  outline: none;
  cursor: pointer;
  vertical-align: top; }

/*General Media*/
/***********************************************************************************************************************************************************************************************************/
/*Icon Button Only RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Custom Radio Button RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/*General Media*/
/*_Radio Button Circle Type*/
.radioCircleFlex_RoClass {
  position: relative;
  display: flex;
  overflow: visible;
  box-sizing: border-box;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  width: auto; }

.radioCircleFlex_RoClass > label.customRadioCircle_RoClass {
  position: relative;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  border-style: solid;
  border-width: var(--cusRadioBorderWidth);
  border-color: var(--cusRadioBorderColor);
  width: var(--cusRadioWidthHeight);
  height: var(--cusRadioWidthHeight);
  padding: 3px;
  border-radius: 50%;
  box-shadow: none;
  /*box-shadow: 0px 0px 15px #00fafa; in JS*/
  background-color: var(--cusRadioBgColor);
  cursor: pointer; }

.radioCircleFlex_RoClass > label.customRadioCircle_RoClass > span.innerCircle_RoClass {
  position: relative;
  display: block;
  box-sizing: border-box;
  overflow: visible;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border-radius: 50%; }

.radioCircleFlex_RoClass > input {
  position: absolute;
  visibility: hidden;
  top: 0px; }

.radioCircleFlex_RoClass > .radioCircleTxtLabel_RoClass {
  position: relative;
  display: block;
  box-sizing: border-box;
  overflow: visible;
  white-space: normal;
  word-break: keep-all;
  width: 100%;
  padding: 4px;
  font-style: normal;
  font-weight: var(--cusRadioFWeight);
  font-size: var(--cusRadioFsize);
  font-family: calibri;
  color: var(--cusRadioFColor); }

.radioCircleFlex_RoClass > .radioCircleIconLabel_RoClass {
  position: relative;
  display: block;
  box-sizing: border-box;
  overflow: visible;
  white-space: normal;
  word-break: keep-all;
  width: var(--radioIconLabelWidthHeight);
  height: var(--radioIconLabelWidthHeight); }

.radioCircleFlex_RoClass > .radioCircleIconLabel_RoClass > img {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%; }

/*_Radio Button Circle Type*/
/*_Radio Button Check Type*/
.radioCheckFlex_RoClass {
  position: relative;
  display: flex;
  overflow: visible;
  box-sizing: border-box;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  width: auto; }

.radioCheckFlex_RoClass > label.customRadioCheck_RoClass {
  position: relative;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  border-style: solid;
  border-width: var(--cusRadioBorderWidth);
  border-color: var(--cusRadioBorderColor);
  width: var(--cusRadioWidthHeight);
  height: var(--cusRadioWidthHeight);
  background-color: var(--cusRadioBgColor);
  cursor: pointer; }

.radioCheckFlex_RoClass > label.customRadioCheck_RoClass > img {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  visibility: hidden; }

.radioCheckFlex_RoClass > input {
  position: absolute;
  visibility: hidden;
  top: 0px; }

.radioCheckFlex_RoClass > .radioCheckTxtLabel_RoClass {
  position: relative;
  display: block;
  box-sizing: border-box;
  overflow: visible;
  white-space: normal;
  word-break: keep-all;
  width: 100%;
  padding: 4px;
  font-style: normal;
  font-weight: var(--cusRadioFWeight);
  font-size: var(--cusRadioFsize);
  font-family: calibri;
  color: var(--cusRadioFColor); }

.radioCheckFlex_RoClass > .radioCheckIconLabel_RoClass {
  position: relative;
  display: block;
  box-sizing: border-box;
  overflow: visible;
  white-space: normal;
  word-break: keep-all;
  width: var(--radioIconLabelWidthHeight);
  height: var(--radioIconLabelWidthHeight); }

.radioCheckFlex_RoClass > .radioCheckIconLabel_RoClass > img {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%; }

/*_Radio Button Check Type*/
/*General Media*/
/***********************************************************************************************************************************************************************************************************/
/*Custom Radio Button RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Calendar Lite RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/*General Media*/
.calLite_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid transparent;
  background-color: #ffffff; }

.calLite_RoClass > .calLiteHead_RoClass {
  position: relative;
  display: flex;
  box-sizing: border-box;
  overflow: visible;
  border: 1px solid transparent;
  flex-flow: row nowrap;
  justify-content: space-around;
  margin-bottom: 10px;
  box-shadow: 0px 0px 10px #5DA9DD; }

.calLite_RoClass > .calLiteHead_RoClass > .calLiteMonthHead_RoClass {
  position: relative;
  display: flex;
  box-sizing: border-box;
  overflow: visible;
  border: 1px solid transparent;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center; }

.calLite_RoClass > .calLiteHead_RoClass > .calLiteYearHead_RoClass {
  position: relative;
  display: flex;
  box-sizing: border-box;
  overflow: visible;
  border: 1px solid transparent;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center; }

.calLite_RoClass > .calLiteHead_RoClass > .calLiteMonthHead_RoClass > .calLiteMonthText_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  border: 1px solid transparent;
  white-space: nowrap;
  font-family: calibri;
  font-style: normal;
  font-weight: bold;
  font-size: var(--calendarHeadTxtFSize);
  color: #06a685; }

.calLite_RoClass > .calLiteHead_RoClass > .calLiteYearHead_RoClass > .calLiteYearText_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  border: 1px solid transparent;
  white-space: nowrap;
  font-family: calibri;
  font-style: normal;
  font-weight: bold;
  font-size: var(--calendarHeadTxtFSize);
  color: #06a685; }

.calLiteButton_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  border: 1px solid transparent;
  width: var(--calendarHeadBtnWidthHeight);
  height: var(--calendarHeadBtnWidthHeight);
  cursor: pointer;
  flex-shrink: 0; }

.calLiteButton_RoClass > img {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%; }

.calLite_RoClass > .calLiteDaysTxt_RoClass {
  position: relative;
  display: flex;
  box-sizing: border-box;
  overflow: visible;
  flex-flow: row nowrap;
  justify-content: space-around; }

.calLite_RoClass > .calLiteDaysTxt_RoClass > div {
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  width: 70px;
  /*To be changed*/
  padding: 4px;
  text-align: center;
  font-family: calibri;
  font-style: normal;
  font-weight: normal;
  font-size: var(--calendarDayTxtFSize); }

.calLite_RoClass > .calLiteDaysIndex_RoClass {
  position: relative;
  display: flex;
  box-sizing: border-box;
  overflow: visible;
  flex-flow: row nowrap;
  justify-content: space-around; }

.calLite_RoClass > .calLiteDaysIndex_RoClass > div {
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  width: 70px;
  /*To be changed*/
  padding: 4px;
  text-align: center;
  font-family: calibri;
  font-style: normal;
  font-weight: normal;
  font-size: var(--calendarDayTxtFSize); }

.calLite_RoClass > .calLiteDaysIndex_RoClass > div > div {
  margin: 5px; }

/*General Media*/
/***********************************************************************************************************************************************************************************************************/
/*Calendar Lite RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Custom Dropdown Button List*/
/***********************************************************************************************************************************************************************************************************/
/*General Media*/
.cusDroplistBtn_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  width: var(--droplistBtnWidth);
  border-width: var(--droplistBtnBorderWidth);
  border-style: solid;
  border-color: var(--droplistBtnBorderColor);
  background-color: var(--droplistBtnBgColor);
  border-radius: var(--dropListBorderRadius); }

.cusDroplistBtn_RoClass > .masterBtnWrap_RoClass {
  position: relative;
  display: flex;
  box-sizing: border-box;
  overflow: visible;
  width: auto;
  background-color: transparent;
  flex-flow: row nowrap;
  align-items: center; }

.cusDroplistBtn_RoClass > .masterBtnWrap_RoClass > button {
  position: relative;
  display: block;
  box-sizing: border-box;
  border: none;
  outline: none;
  background-color: transparent;
  width: 100%;
  cursor: pointer;
  padding: var(--droplistBtnPadding);
  color: var(--droplistBtnFColor);
  font-style: normal;
  font-weight: bold;
  font-family: calibri;
  font-size: var(--dropListBtnFSize); }

.cusDroplistBtn_RoClass > .masterBtnWrap_RoClass > div {
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  background-color: transparent;
  width: var(--dropListBtnIconSize);
  height: var(--dropListBtnIconSize);
  flex-shrink: 0;
  cursor: pointer; }

.cusDroplistBtn_RoClass > .masterBtnWrap_RoClass > div > img {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%; }

.cusDroplistBtn_RoClass > .droplistWrap_RoClass {
  position: relative;
  display: none;
  overflow: visible;
  box-sizing: border-box; }

.cusDroplistBtn_RoClass > .droplistWrap_RoClass > .listBtn_RoClass {
  position: relative;
  display: block;
  box-sizing: border-box;
  white-space: normal;
  width: 100%;
  border-width: var(--listBtnBorderWidth);
  border-style: solid;
  border-color: var(--listBtnBorderColor);
  font-style: normal;
  font-weight: bold;
  font-family: calibri;
  font-size: var(--dropListBtnFSize);
  color: var(--droplistBtnFColor);
  outline: none;
  cursor: pointer;
  background-color: transparent;
  padding: var(--droplistBtnPadding); }

.cusDroplistBtn_RoClass > .droplistWrap_RoClass > .listBtn_RoClass:hover {
  background-color: var(--listBtnBgColorha);
  color: var(--listBtnFColorha); }

/*General Media*/
/***********************************************************************************************************************************************************************************************************/
/*Custom Dropdown Button List*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Chart Wrapper*/
/***********************************************************************************************************************************************************************************************************/
/*General Media*/
.chartWrap_RoClass {
  position: relative;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  border-width: var(--chartWrapBorderWidth);
  border-style: var(--chartWrapBorderStyle);
  border-color: var(--chartWrapBorderColor);
  border-radius: var(--chartWrapBorderRadius);
  width: var(--chartWrapWidth);
  height: var(--chartWrapHeight); }

/*General Media*/
/***********************************************************************************************************************************************************************************************************/
/*Chart Wrapper*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Date Range*/
/***********************************************************************************************************************************************************************************************************/
/*General Media*/
.dateRangeWrap_RoClass {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  overflow: visible;
  border: 0px solid transparent;
  width: auto; }

.dateRange_RoClass {
  position: relative;
  display: inline-block;
  overflow: visible;
  box-sizing: border-box;
  background-color: transparent;
  border-radius: var(--dateRangeBorderRadius);
  border-width: var(--dateRangeBorderWidth);
  border-style: solid;
  border-color: var(--dateRangeBorderColor);
  width: auto;
  cursor: pointer; }

.dateRangeDetails_RoClass {
  position: relative;
  overflow: visible;
  display: flex;
  box-sizing: border-box;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  padding: var(--dateRangePadding); }

.dateRangeIcon_RoClass {
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  width: var(--dateRangeIconSize);
  height: var(--dateRangeIconSize);
  background-color: transparent;
  background-image: var(--dateRangeIcon);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0; }

.dateRangeText_RoClass {
  position: relative;
  overflow: visible;
  box-sizing: border-box;
  white-space: nowrap;
  font-family: calibri;
  font-size: var(--dateRangeFSize);
  font-weight: normal;
  font-style: normal;
  color: var(--dateRangeFColor); }

.dateRangeTooltipArrow_RoClass {
  position: absolute;
  box-sizing: border-box;
  display: none;
  border-width: 7px;
  border-style: solid;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: var(--dateRangeTooltipColor);
  border-left-color: transparent;
  width: 10px; }

.dateRangeCalLite_RoClass {
  border-width: 1px;
  border-style: solid;
  border-color: var(--dateRangeCalLiteBorderColor); }

/*General Media*/
/*Mobile*/
@media all and (max-width: 641px) {
  .dateRangeCalLiteWrap_RoClass {
    position: absolute;
    display: flex;
    overflow: hidden;
    border: 1px solid transparent;
    box-sizing: border-box;
    flex-flow: column nowrap;
    /*To be changed*/
    width: var(--dateRangeCalLiteWrapWidth);
    max-height: 0px;
    top: var(--dateRangeCalLiteWrapTop);
    transition: max-height 0.5s;
    -webkit-transition: max-height 0.5s; } }
/*Tablet*/
@media all and (min-width: 642px) and (max-width: 1080px) {
  .dateRangeCalLiteWrap_RoClass {
    position: absolute;
    display: flex;
    overflow: hidden;
    border: 1px solid transparent;
    box-sizing: border-box;
    flex-flow: row nowrap;
    /*changed*/
    width: var(--dateRangeCalLiteWrapWidth);
    max-height: 0px;
    top: var(--dateRangeCalLiteWrapTop);
    transition: max-height 0.5s;
    -webkit-transition: max-height 0.5s; } }
/*Laptop*/
@media all and (min-width: 1081px) and (max-width: 1600px) {
  .dateRangeCalLiteWrap_RoClass {
    position: absolute;
    display: flex;
    overflow: hidden;
    border: 1px solid transparent;
    box-sizing: border-box;
    flex-flow: row nowrap;
    /*changed*/
    width: var(--dateRangeCalLiteWrapWidth);
    max-height: 0px;
    top: var(--dateRangeCalLiteWrapTop);
    transition: max-height 0.5s;
    -webkit-transition: max-height 0.5s; } }
/*Desktop*/
@media all and (min-width: 1601px) {
  .dateRangeCalLiteWrap_RoClass {
    position: absolute;
    display: flex;
    overflow: hidden;
    border: 1px solid transparent;
    box-sizing: border-box;
    flex-flow: row nowrap;
    /*changed*/
    width: var(--dateRangeCalLiteWrapWidth);
    max-height: 0px;
    top: var(--dateRangeCalLiteWrapTop);
    transition: max-height 0.5s;
    -webkit-transition: max-height 0.5s; } }
/***********************************************************************************************************************************************************************************************************/
/*Date Range*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Select Dropdown*/
/***********************************************************************************************************************************************************************************************************/
/*General Media*/
.selectDropdownWrap_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  border-width: var(--selectDropdownBorderWidth);
  border-style: solid;
  border-color: var(--selectDropdownBorderColor);
  border-radius: var(--selectDropdownBorderRadius);
  width: var(--selectDropdownWidth);
  cursor: pointer; }

.selectDropdownWrap_RoClass .displayedSelectedFlex_RoClass {
  position: relative;
  display: flex;
  box-sizing: border-box;
  overflow: visible;
  flex-flow: row nowrap;
  align-items: center;
  padding: 5px;
  background-color: var(--selectDropdownBgColor); }

.selectDropdownWrap_RoClass .displayedSelectedIcon_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  background-image: var(--optIcon);
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  width: var(--selectDropdownIconSize);
  height: var(--selectDropdownIconSize);
  flex-shrink: 0; }

.selectDropdownWrap_RoClass .displayedSelectedText_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-family: calibri;
  font-style: normal;
  font-weight: normal;
  font-size: var(--selectDropdownFSize);
  color: var(--selectDropdownFColor);
  margin-left: 4px; }

.selectDropdownWrap_RoClass .displayedSelectedResetBtn_RoClass {
  position: relative;
  display: none;
  box-sizing: border-box;
  overflow: visible;
  background-image: var(--selectDropdownResetBtnIcon);
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  width: var(--selectDropdownResetBtnSize);
  height: var(--selectDropdownResetBtnSize);
  flex-shrink: 0; }

.selectDropdownWrap_RoClass .displayedSelectedChevron_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  background-image: var(--selectDropdownChevron);
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  width: var(--selectDropdownChevronSize);
  height: var(--selectDropdownChevronSize);
  flex-shrink: 0;
  transform: rotateX(0deg);
  -webkit-transition: transform 0.5s;
  transition: transform 0.5s; }

.selectDropdownWrap_RoClass .selectDropdownOptionsWrap_RoClass {
  position: absolute;
  display: none;
  box-sizing: border-box;
  overflow: auto;
  max-height: 0;
  width: 100%;
  background-color: var(--selectDropdownBgColor);
  -webkit-transition: max-height 1s;
  transition: max-height 1s; }

.selectDropdownWrap_RoClass .searchOpts_RoClass {
  position: sticky;
  display: block;
  box-sizing: border-box;
  width: 100%;
  background-color: var(--searchOptsBgColor);
  border-style: solid;
  border-width: 1px;
  border-color: var(--selectDropdownBorderColor);
  top: 0;
  z-index: 1;
  font-family: calibri;
  font-style: normal;
  font-weight: normal;
  font-size: var(--selectDropdownFSize);
  color: var(--searchOptsFColor);
  padding: 7px; }

.selectDropdownWrap_RoClass .selectDropdownOpt_RoClass {
  position: relative;
  display: flex;
  box-sizing: border-box;
  overflow: visible;
  flex-flow: row nowrap;
  align-items: center;
  padding: 5px;
  background-color: var(--selectDropdownBgColor); }

.selectDropdownWrap_RoClass .optIcon_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  background-image: var(--optIcon);
  background-repeat: no-repeat;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  width: var(--selectDropdownIconSize);
  height: var(--selectDropdownIconSize);
  flex-shrink: 0; }

.selectDropdownWrap_RoClass .optText_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-family: calibri;
  font-style: normal;
  font-weight: normal;
  font-size: var(--selectDropdownFSize);
  color: var(--selectDropdownFColor);
  margin-left: 4px; }

.selectDropdownWrap_RoClass .selectDropdownOpt_RoClass:hover, .selectDropdownOpt_RoClass:hover .optText_RoClass {
  background-color: var(--hoverOptBgColor);
  color: var(--hoverOptFColor); }

.selectDropdownWrap_RoClass .selectDropdownOptionsWrap_RoClass::-webkit-scrollbar {
  width: var(--selectDropdownScrollSize);
  height: var(--selectDropdownScrollSize); }

.selectDropdownWrap_RoClass .selectDropdownOptionsWrap_RoClass::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px gray;
  border-radius: 10px; }

.selectDropdownWrap_RoClass .selectDropdownOptionsWrap_RoClass::-webkit-scrollbar-thumb {
  background-color: var(--optWrapThumbBgColor);
  border-radius: 10px; }

/*General Media*/
/***********************************************************************************************************************************************************************************************************/
/*Select Dropdown*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Box Loader*/
/***********************************************************************************************************************************************************************************************************/
/*General Media*/
.boxLoaderWrap_RoClass {
  position: relative;
  display: none;
  /*JS Change to flex*/
  box-sizing: border-box;
  overflow: hidden;
  width: auto;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center; }

.boxLoaderWrap_RoClass .boxLoaderIcon_RoClass {
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  width: var(--boxLoaderIconSize);
  height: var(--boxLoaderIconSize); }

.boxLoaderIcon_RoClass img {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%; }

/*General Media*/
/***********************************************************************************************************************************************************************************************************/
/*Box Loader*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Tablet*/
@media all and (min-width: 642px) and (max-width: 1080px) {
  /*Style Here*/ }
/*Tablet*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Laptop*/
@media all and (min-width: 1081px) and (max-width: 1600px) {
  /*Style Here*/ }
/*Laptop*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Desktop*/
@media all and (min-width: 1601px) {
  /*Style Here*/ }
/*Desktop*/
/***********************************************************************************************************************************************************************************************************/
/*Box Loader*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Layout one design RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/*Mobile*/
@media all and (max-width: 641px) {
  /*Layout itself*/
  div.rolayout_RoClass {
    position: fixed;
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
    flex-flow: row nowrap;
    width: 100%;
    height: 100%; }

  /*Left Side Item*/
  div.rolayout_RoClass > div.sidemecha_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    direction: rtl;
    width: 0px;
    /*180px To be changed (JS)*/
    height: 100%;
    flex-shrink: 0;
    background: var(--naviBgColor); }

  /* width */
  div.rolayout_RoClass > div.sidemecha_RoClass::-webkit-scrollbar {
    width: 7px;
    height: 7px; }

  /* Track */
  div.rolayout_RoClass > div.sidemecha_RoClass::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px gray;
    border-radius: 10px; }

  /* Handle */
  div.rolayout_RoClass > div.sidemecha_RoClass::-webkit-scrollbar-thumb {
    background: #4DAF4F;
    border-radius: 10px; }

  /* Handle on hover */
  div.rolayout_RoClass > div.sidemecha_RoClass::-webkit-scrollbar-thumb:hover {
    background: #4DAF4F; }

  div.rolayout_RoClass > div.sidemecha_RoClass > div.sidemechaCon_RoClass {
    position: relative;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    direction: ltr;
    width: auto;
    height: auto;
    background: none; }

  /*Left Side Item*/
  /*Navigation Menu*/
  .mainNavMenu_RoClass {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: visible;
    width: auto;
    cursor: pointer;
    flex-flow: row nowrap;
    align-items: center;
    text-decoration: none;
    background-color: var(--mainNavMenuBgColor);
    border-radius: 3px;
    font-size: var(--mainNavMenuFSize);
    font-style: normal;
    font-weight: normal;
    color: var(--mainNavMenuFColor);
    padding: var(--generalNavMenuPadding);
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s; }

  .activeMainNavMenu_RoClass {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: visible;
    width: auto;
    cursor: pointer;
    flex-flow: row nowrap;
    align-items: center;
    text-decoration: none;
    background-color: var(--hoverMainNavMenuBgColor);
    border-radius: 3px;
    font-size: var(--mainNavMenuFSize);
    font-style: normal;
    font-weight: normal;
    color: var(--hoverMainNavMenuFColor);
    padding: var(--generalNavMenuPadding);
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s; }

  .mainNavMenuIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--mainNavMenuIconSize);
    height: var(--mainNavMenuIconSize);
    flex-shrink: 0;
    background-color: transparent;
    background-image: var(--mainNavMenuIcon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }

  .activeMainNavMenuIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--mainNavMenuIconSize);
    height: var(--mainNavMenuIconSize);
    flex-shrink: 0;
    background-color: transparent;
    background-image: var(--activeMainNavMenuIcon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }

  .mainNavMenu_RoClass:hover {
    background-color: var(--hoverMainNavMenuBgColor);
    color: var(--hoverMainNavMenuFColor); }

  .mainNavMenu_RoClass:hover .mainNavMenuIconWrap_RoClass {
    background-image: var(--activeMainNavMenuIcon); }

  .generalNavMenuText_RoClass {
    position: relative;
    display: block;
    overflow: visible;
    box-sizing: border-box;
    white-space: normal;
    font-family: calibri;
    width: 100%;
    margin-left: 7px; }

  .chevronIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--chevronIconSize);
    height: var(--chevronIconSize);
    flex-shrink: 0;
    transform: rotate(0deg);
    transition: transform 0.1s;
    -webkit-transition: transform 0.1s; }

  .chevronIconWrap_RoClass > img {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%; }

  .activeChevronIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--chevronIconSize);
    height: var(--chevronIconSize);
    flex-shrink: 0;
    transform: rotate(90deg);
    transition: transform 0.1s;
    -webkit-transition: transform 0.1s; }

  .activeChevronIconWrap_RoClass > img {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%; }

  /*Navigation Menu*/
  /*Navigation Menus From Collapse or Sub Menu*/
  .subNavMenuWrap_RoClass {
    position: relative;
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--subNavMenuWrapBgColor);
    transition: max-height 0.5s;
    -webkit-transition: max-height 0.5s; }

  .subNavMenu_RoClass {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: visible;
    width: auto;
    cursor: pointer;
    flex-flow: row nowrap;
    align-items: center;
    text-decoration: none;
    background-color: var(--subNavMenuBgColor);
    border-radius: 3px;
    font-size: var(--subNavMenuFSize);
    font-style: normal;
    font-weight: normal;
    color: var(--subNavMenuFColor);
    padding: var(--generalNavMenuPadding);
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s; }

  .activeSubNavMenu_RoClass {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: visible;
    width: auto;
    cursor: pointer;
    flex-flow: row nowrap;
    align-items: center;
    text-decoration: none;
    background-color: var(--hoverSubNavMenuBgColor);
    border-radius: 3px;
    font-size: var(--subNavMenuFSize);
    font-style: normal;
    font-weight: normal;
    color: var(--hoverSubNavMenuFColor);
    padding: var(--generalNavMenuPadding);
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s; }

  .subNavMenuIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--subNavMenuIconSize);
    height: var(--subNavMenuIconSize);
    flex-shrink: 0;
    background-color: transparent;
    background-image: var(--subNavMenuIcon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }

  .activeSubNavMenuIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--subNavMenuIconSize);
    height: var(--subNavMenuIconSize);
    flex-shrink: 0;
    background-color: transparent;
    background-image: var(--activeSubNavMenuIcon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }

  .subNavMenu_RoClass:hover {
    background-color: var(--hoverSubNavMenuBgColor);
    color: var(--hoverSubNavMenuFColor); }

  .subNavMenu_RoClass:hover .subNavMenuIconWrap_RoClass {
    background-image: var(--activeSubNavMenuIcon); }

  /*Navigation Menus From Collapse Or Sub Menu*/
  /*Main Side*/
  div.rolayout_RoClass > div.mainmecha_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: auto;
    width: 100%;
    height: auto;
    background-color: var(--mainBodyBgColor); }

  /* width */
  div.rolayout_RoClass > div.mainmecha_RoClass::-webkit-scrollbar {
    width: 7px;
    height: 7px; }

  /* Track */
  div.rolayout_RoClass > div.mainmecha_RoClass::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px gray;
    border-radius: 10px; }

  /* Handle */
  div.rolayout_RoClass > div.mainmecha_RoClass::-webkit-scrollbar-thumb {
    background: #03fce3;
    border-radius: 10px; }

  /* Handle on hover */
  div.rolayout_RoClass > div.mainmecha_RoClass::-webkit-scrollbar-thumb:hover {
    background: #03fce3; }

  div.rolayout_RoClass > div.mainmecha_RoClass > .mainmechaCon_RoClass {
    position: relative;
    display: block;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    width: auto; }

  /*_Burger*/
  div.rolayout_RoClass > div.mainmecha_RoClass > .mainmechaCon_RoClass > div.burger_RoClass {
    position: relative;
    display: inline-block;
    /*To be changed*/
    box-sizing: border-box;
    overflow: visible;
    width: 25px;
    /*To be changed*/
    height: 25px;
    /*To be changed*/
    cursor: pointer; }

  div.rolayout_RoClass > div.mainmecha_RoClass > .mainmechaCon_RoClass > div.burger_RoClass > img.burgerIcon_RoClass {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%; }

  /*_Burger*/
  /*_Project Title*/
  div.rolayout_RoClass > div.mainmecha_RoClass > .layoutOneHead_RoClass {
    padding: 8px;
    white-space: nowrap;
    background-color: var(--projectTitle_BgColor); }

  div.rolayout_RoClass > div.mainmecha_RoClass > .mainmechaCon_RoClass > .projectTitle_RoClass {
    position: relative;
    display: block;
    /*To be changed*/
    box-sizing: border-box;
    overflow: hidden;
    white-space: normal;
    word-break: keep-all;
    padding-right: 5px;
    font-family: calibri;
    font-style: normal;
    font-weight: bold;
    font-size: var(--projectTitleTextFSize);
    color: var(--projectTitleTextFColor);
    vertical-align: top; }

  /*_Project Title*/
  /*_Project Title and Login User Details*/
  div.rolayout_RoClass > div.mainmecha_RoClass > .mainmechaCon_RoClass > .projTitleAndUserLogin_RoClass {
    position: relative;
    display: flex;
    overflow: visible;
    box-sizing: border-box;
    border: 1px solid transparent;
    flex-flow: column wrap;
    /*To be changed*/
    align-items: center;
    justify-content: flex-start;
    /*To be changed*/
    width: 100%; }

  .projTitleTxt_RoClass {
    position: relative;
    display: block;
    overflow: visible;
    box-sizing: border-box;
    border: 1px solid transparent;
    white-space: normal;
    width: auto;
    font-family: calibri;
    font-style: normal;
    font-weight: bold;
    font-size: var(--projectTitleTextFSize);
    color: var(--projectTitleTextFColor);
    padding: 5px; }

  .userLogin_RoClass {
    position: relative;
    display: flex;
    overflow: visible;
    box-sizing: border-box;
    border: 1px solid transparent;
    flex-flow: row nowrap;
    width: auto; }

  .userLoginIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    border: 1px solid transparent;
    width: var(--projectTitleUserIconSize);
    height: var(--projectTitleUserIconSize);
    flex-shrink: 0;
    margin-right: 3px; }

  .userLoginIconWrap_RoClass > img {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%; }

  .userLoginDetails_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    border: 1px solid transparent;
    white-space: normal;
    width: auto;
    font-family: calibri;
    font-style: normal;
    font-weight: bold;
    font-size: var(--projectTitleTextFSize);
    color: var(--projectTitleTextFColor);
    align-self: center; }

  /*_Project Title and Login User Details*/
  /*Main Side*/ }
/*Mobile*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Tablet*/
@media all and (min-width: 642px) and (max-width: 1080px) {
  /*Layout itself*/
  div.rolayout_RoClass {
    position: fixed;
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
    flex-flow: row nowrap;
    width: 100%;
    height: 100%; }

  /*Layout itself*/
  /*Left Side Item*/
  div.rolayout_RoClass > div.sidemecha_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    direction: rtl;
    width: 0px;
    /*200px changed (JS)*/
    height: 100%;
    flex-shrink: 0;
    background: var(--naviBgColor); }

  /* width */
  div.rolayout_RoClass > div.sidemecha_RoClass::-webkit-scrollbar {
    width: 7px;
    height: 7px; }

  /* Track */
  div.rolayout_RoClass > div.sidemecha_RoClass::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px gray;
    border-radius: 10px; }

  /* Handle */
  div.rolayout_RoClass > div.sidemecha_RoClass::-webkit-scrollbar-thumb {
    background: #4DAF4F;
    border-radius: 10px; }

  /* Handle on hover */
  div.rolayout_RoClass > div.sidemecha_RoClass::-webkit-scrollbar-thumb:hover {
    background: #4DAF4F; }

  div.rolayout_RoClass > div.sidemecha_RoClass > div.sidemechaCon_RoClass {
    position: relative;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    direction: ltr;
    width: auto;
    height: auto;
    background: none; }

  /*Left Side Item*/
  /*Navigation Menu*/
  .mainNavMenu_RoClass {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: visible;
    width: auto;
    cursor: pointer;
    flex-flow: row nowrap;
    align-items: center;
    text-decoration: none;
    background-color: var(--mainNavMenuBgColor);
    border-radius: 3px;
    font-size: var(--mainNavMenuFSize);
    font-style: normal;
    font-weight: normal;
    color: var(--mainNavMenuFColor);
    padding: var(--generalNavMenuPadding);
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s; }

  .activeMainNavMenu_RoClass {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: visible;
    width: auto;
    cursor: pointer;
    flex-flow: row nowrap;
    align-items: center;
    text-decoration: none;
    background-color: var(--hoverMainNavMenuBgColor);
    border-radius: 3px;
    font-size: var(--mainNavMenuFSize);
    font-style: normal;
    font-weight: normal;
    color: var(--hoverMainNavMenuFColor);
    padding: var(--generalNavMenuPadding);
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s; }

  .mainNavMenuIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--mainNavMenuIconSize);
    height: var(--mainNavMenuIconSize);
    flex-shrink: 0;
    background-color: transparent;
    background-image: var(--mainNavMenuIcon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }

  .activeMainNavMenuIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--mainNavMenuIconSize);
    height: var(--mainNavMenuIconSize);
    flex-shrink: 0;
    background-color: transparent;
    background-image: var(--activeMainNavMenuIcon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }

  .mainNavMenu_RoClass:hover {
    background-color: var(--hoverMainNavMenuBgColor);
    color: var(--hoverMainNavMenuFColor); }

  .mainNavMenu_RoClass:hover .mainNavMenuIconWrap_RoClass {
    background-image: var(--activeMainNavMenuIcon); }

  .generalNavMenuText_RoClass {
    position: relative;
    display: block;
    overflow: visible;
    box-sizing: border-box;
    white-space: normal;
    font-family: calibri;
    width: 100%;
    margin-left: 7px; }

  .chevronIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--chevronIconSize);
    height: var(--chevronIconSize);
    flex-shrink: 0;
    transform: rotate(0deg);
    transition: transform 0.1s;
    -webkit-transition: transform 0.1s; }

  .chevronIconWrap_RoClass > img {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%; }

  .activeChevronIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--chevronIconSize);
    height: var(--chevronIconSize);
    flex-shrink: 0;
    transform: rotate(90deg);
    transition: transform 0.1s;
    -webkit-transition: transform 0.1s; }

  .activeChevronIconWrap_RoClass > img {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%; }

  /*Navigation Menu*/
  /*Navigation Menus From Collapse or Sub Menu*/
  .subNavMenuWrap_RoClass {
    position: relative;
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--subNavMenuWrapBgColor);
    transition: max-height 0.5s;
    -webkit-transition: max-height 0.5s; }

  .subNavMenu_RoClass {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: visible;
    width: auto;
    cursor: pointer;
    flex-flow: row nowrap;
    align-items: center;
    text-decoration: none;
    background-color: var(--subNavMenuBgColor);
    border-radius: 3px;
    font-size: var(--subNavMenuFSize);
    font-style: normal;
    font-weight: normal;
    color: var(--subNavMenuFColor);
    padding: var(--generalNavMenuPadding);
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s; }

  .activeSubNavMenu_RoClass {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: visible;
    width: auto;
    cursor: pointer;
    flex-flow: row nowrap;
    align-items: center;
    text-decoration: none;
    background-color: var(--hoverSubNavMenuBgColor);
    border-radius: 3px;
    font-size: var(--subNavMenuFSize);
    font-style: normal;
    font-weight: normal;
    color: var(--hoverSubNavMenuFColor);
    padding: var(--generalNavMenuPadding);
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s; }

  .subNavMenuIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--subNavMenuIconSize);
    height: var(--subNavMenuIconSize);
    flex-shrink: 0;
    background-color: transparent;
    background-image: var(--subNavMenuIcon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }

  .activeSubNavMenuIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--subNavMenuIconSize);
    height: var(--subNavMenuIconSize);
    flex-shrink: 0;
    background-color: transparent;
    background-image: var(--activeSubNavMenuIcon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }

  .subNavMenu_RoClass:hover {
    background-color: var(--hoverSubNavMenuBgColor);
    color: var(--hoverSubNavMenuFColor); }

  .subNavMenu_RoClass:hover .subNavMenuIconWrap_RoClass {
    background-image: var(--activeSubNavMenuIcon); }

  /*Navigation Menus From Collapse Or Sub Menu*/
  /*Main Side*/
  div.rolayout_RoClass > div.mainmecha_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: auto;
    width: 100%;
    height: auto;
    background-color: var(--mainBodyBgColor); }

  /* width */
  div.rolayout_RoClass > div.mainmecha_RoClass::-webkit-scrollbar {
    width: 7px;
    height: 7px; }

  /* Track */
  div.rolayout_RoClass > div.mainmecha_RoClass::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px gray;
    border-radius: 10px; }

  /* Handle */
  div.rolayout_RoClass > div.mainmecha_RoClass::-webkit-scrollbar-thumb {
    background: #03fce3;
    border-radius: 10px; }

  /* Handle on hover */
  div.rolayout_RoClass > div.mainmecha_RoClass::-webkit-scrollbar-thumb:hover {
    background: #03fce3; }

  div.rolayout_RoClass > div.mainmecha_RoClass > div.mainmechaCon_RoClass {
    position: relative;
    display: block;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    width: auto; }

  /*_Burger*/
  div.rolayout_RoClass > div.mainmecha_RoClass > .mainmechaCon_RoClass > div.burger_RoClass {
    position: relative;
    display: inline-block;
    /*To be changed*/
    box-sizing: border-box;
    overflow: visible;
    width: 25px;
    /*To be changed*/
    height: 25px;
    /*To be changed*/
    cursor: pointer; }

  div.rolayout_RoClass > div.mainmecha_RoClass > .mainmechaCon_RoClass > div.burger_RoClass > img.burgerIcon_RoClass {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%; }

  /*_Burger*/
  /*_Project Title*/
  div.rolayout_RoClass > div.mainmecha_RoClass > .layoutOneHead_RoClass {
    padding: 8px;
    white-space: nowrap;
    background-color: var(--projectTitle_BgColor); }

  div.rolayout_RoClass > div.mainmecha_RoClass > .mainmechaCon_RoClass > .projectTitle_RoClass {
    position: relative;
    display: inline-block;
    /*changed*/
    box-sizing: border-box;
    overflow: hidden;
    white-space: normal;
    word-break: keep-all;
    padding-right: 5px;
    font-family: calibri;
    font-style: normal;
    font-weight: bold;
    font-size: var(--projectTitleTextFSize);
    color: var(--projectTitleTextFColor);
    vertical-align: top; }

  /*_Project Title*/
  /*_Project Title and Login User Details*/
  div.rolayout_RoClass > div.mainmecha_RoClass > .mainmechaCon_RoClass > .projTitleAndUserLogin_RoClass {
    position: relative;
    display: flex;
    overflow: visible;
    box-sizing: border-box;
    border: 1px solid transparent;
    flex-flow: row wrap;
    /*changed*/
    align-items: center;
    justify-content: space-between;
    /*changed*/
    width: 100%; }

  .projTitleTxt_RoClass {
    position: relative;
    display: block;
    overflow: visible;
    box-sizing: border-box;
    border: 1px solid transparent;
    white-space: normal;
    width: auto;
    font-family: calibri;
    font-style: normal;
    font-weight: bold;
    font-size: var(--projectTitleTextFSize);
    color: var(--projectTitleTextFColor);
    padding: 5px; }

  .userLogin_RoClass {
    position: relative;
    display: flex;
    overflow: visible;
    box-sizing: border-box;
    border: 1px solid transparent;
    flex-flow: row nowrap;
    width: auto; }

  .userLoginIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    border: 1px solid transparent;
    width: var(--projectTitleUserIconSize);
    height: var(--projectTitleUserIconSize);
    flex-shrink: 0;
    margin-right: 3px; }

  .userLoginIconWrap_RoClass > img {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%; }

  .userLoginDetails_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    border: 1px solid transparent;
    white-space: normal;
    width: auto;
    font-family: calibri;
    font-style: normal;
    font-weight: bold;
    font-size: var(--projectTitleTextFSize);
    color: var(--projectTitleTextFColor);
    align-self: center; }

  /*_Project Title and Login User Details*/
  /*Main Side*/ }
/*Tablet*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Laptop*/
@media all and (min-width: 1081px) and (max-width: 1600px) {
  /*Layout itself*/
  div.rolayout_RoClass {
    position: fixed;
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
    flex-flow: row nowrap;
    width: 100%;
    height: 100%; }

  /*Layout itself*/
  /*Left Side Item*/
  div.rolayout_RoClass > div.sidemecha_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    direction: rtl;
    width: 250px;
    /*250px changed (JS)*/
    height: 100%;
    flex-shrink: 0;
    background: var(--naviBgColor); }

  /* width */
  div.rolayout_RoClass > div.sidemecha_RoClass::-webkit-scrollbar {
    width: 7px;
    height: 7px; }

  /* Track */
  div.rolayout_RoClass > div.sidemecha_RoClass::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px gray;
    border-radius: 10px; }

  /* Handle */
  div.rolayout_RoClass > div.sidemecha_RoClass::-webkit-scrollbar-thumb {
    background: #4DAF4F;
    border-radius: 10px; }

  /* Handle on hover */
  div.rolayout_RoClass > div.sidemecha_RoClass::-webkit-scrollbar-thumb:hover {
    background: #4DAF4F; }

  div.rolayout_RoClass > div.sidemecha_RoClass > div.sidemechaCon_RoClass {
    position: relative;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    direction: ltr;
    width: auto;
    height: auto;
    background: none; }

  /*Left Side Item*/
  /*Navigation Menu*/
  .mainNavMenu_RoClass {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: visible;
    width: auto;
    cursor: pointer;
    flex-flow: row nowrap;
    align-items: center;
    text-decoration: none;
    background-color: var(--mainNavMenuBgColor);
    border-radius: 3px;
    font-size: var(--mainNavMenuFSize);
    font-style: normal;
    font-weight: normal;
    color: var(--mainNavMenuFColor);
    padding: var(--generalNavMenuPadding);
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s; }

  .activeMainNavMenu_RoClass {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: visible;
    width: auto;
    cursor: pointer;
    flex-flow: row nowrap;
    align-items: center;
    text-decoration: none;
    background-color: var(--hoverMainNavMenuBgColor);
    border-radius: 3px;
    font-size: var(--mainNavMenuFSize);
    font-style: normal;
    font-weight: normal;
    color: var(--hoverMainNavMenuFColor);
    padding: var(--generalNavMenuPadding);
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s; }

  .mainNavMenuIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--mainNavMenuIconSize);
    height: var(--mainNavMenuIconSize);
    flex-shrink: 0;
    background-color: transparent;
    background-image: var(--mainNavMenuIcon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }

  .activeMainNavMenuIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--mainNavMenuIconSize);
    height: var(--mainNavMenuIconSize);
    flex-shrink: 0;
    background-color: transparent;
    background-image: var(--activeMainNavMenuIcon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }

  .mainNavMenu_RoClass:hover {
    background-color: var(--hoverMainNavMenuBgColor);
    color: var(--hoverMainNavMenuFColor); }

  .mainNavMenu_RoClass:hover .mainNavMenuIconWrap_RoClass {
    background-image: var(--activeMainNavMenuIcon); }

  .generalNavMenuText_RoClass {
    position: relative;
    display: block;
    overflow: visible;
    box-sizing: border-box;
    white-space: normal;
    font-family: calibri;
    width: 100%;
    margin-left: 7px; }

  .chevronIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--chevronIconSize);
    height: var(--chevronIconSize);
    flex-shrink: 0;
    transform: rotate(0deg);
    transition: transform 0.1s;
    -webkit-transition: transform 0.1s; }

  .chevronIconWrap_RoClass > img {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%; }

  .activeChevronIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--chevronIconSize);
    height: var(--chevronIconSize);
    flex-shrink: 0;
    transform: rotate(90deg);
    transition: transform 0.1s;
    -webkit-transition: transform 0.1s; }

  .activeChevronIconWrap_RoClass > img {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%; }

  /*Navigation Menu*/
  /*Navigation Menus From Collapse or Sub Menu*/
  .subNavMenuWrap_RoClass {
    position: relative;
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--subNavMenuWrapBgColor);
    transition: max-height 0.5s;
    -webkit-transition: max-height 0.5s; }

  .subNavMenu_RoClass {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: visible;
    width: auto;
    cursor: pointer;
    flex-flow: row nowrap;
    align-items: center;
    text-decoration: none;
    background-color: var(--subNavMenuBgColor);
    border-radius: 3px;
    font-size: var(--subNavMenuFSize);
    font-style: normal;
    font-weight: normal;
    color: var(--subNavMenuFColor);
    padding: var(--generalNavMenuPadding);
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s; }

  .activeSubNavMenu_RoClass {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: visible;
    width: auto;
    cursor: pointer;
    flex-flow: row nowrap;
    align-items: center;
    text-decoration: none;
    background-color: var(--hoverSubNavMenuBgColor);
    border-radius: 3px;
    font-size: var(--subNavMenuFSize);
    font-style: normal;
    font-weight: normal;
    color: var(--hoverSubNavMenuFColor);
    padding: var(--generalNavMenuPadding);
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s; }

  .subNavMenuIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--subNavMenuIconSize);
    height: var(--subNavMenuIconSize);
    flex-shrink: 0;
    background-color: transparent;
    background-image: var(--subNavMenuIcon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }

  .activeSubNavMenuIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--subNavMenuIconSize);
    height: var(--subNavMenuIconSize);
    flex-shrink: 0;
    background-color: transparent;
    background-image: var(--activeSubNavMenuIcon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }

  .subNavMenu_RoClass:hover {
    background-color: var(--hoverSubNavMenuBgColor);
    color: var(--hoverSubNavMenuFColor); }

  .subNavMenu_RoClass:hover .subNavMenuIconWrap_RoClass {
    background-image: var(--activeSubNavMenuIcon); }

  /*Navigation Menus From Collapse Or Sub Menu*/
  /*Main Side*/
  div.rolayout_RoClass > div.mainmecha_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: auto;
    width: 100%;
    height: auto;
    background-color: var(--mainBodyBgColor); }

  /* width */
  div.rolayout_RoClass > div.mainmecha_RoClass::-webkit-scrollbar {
    width: 7px;
    height: 7px; }

  /* Track */
  div.rolayout_RoClass > div.mainmecha_RoClass::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px gray;
    border-radius: 10px; }

  /* Handle */
  div.rolayout_RoClass > div.mainmecha_RoClass::-webkit-scrollbar-thumb {
    background: #03fce3;
    border-radius: 10px; }

  /* Handle on hover */
  div.rolayout_RoClass > div.mainmecha_RoClass::-webkit-scrollbar-thumb:hover {
    background: #03fce3; }

  div.rolayout_RoClass > div.mainmecha_RoClass > div.mainmechaCon_RoClass {
    position: relative;
    display: block;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    width: auto; }

  /*_Burger*/
  div.rolayout_RoClass > div.mainmecha_RoClass > .mainmechaCon_RoClass > div.burger_RoClass {
    position: relative;
    display: none;
    /*changed*/
    box-sizing: border-box;
    overflow: visible;
    width: 28px;
    /*changed*/
    height: 28px;
    /*changed*/
    cursor: pointer; }

  div.rolayout_RoClass > div.mainmecha_RoClass > .mainmechaCon_RoClass > div.burger_RoClass > img.burgerIcon_RoClass {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%; }

  /*_Burger*/
  /*_Project Title*/
  div.rolayout_RoClass > div.mainmecha_RoClass > .layoutOneHead_RoClass {
    padding: 8px;
    white-space: nowrap;
    background-color: var(--projectTitle_BgColor); }

  div.rolayout_RoClass > div.mainmecha_RoClass > .mainmechaCon_RoClass > .projectTitle_RoClass {
    position: relative;
    display: inline-block;
    /*changed*/
    box-sizing: border-box;
    overflow: hidden;
    white-space: normal;
    word-break: keep-all;
    padding-right: 5px;
    font-family: calibri;
    font-style: normal;
    font-weight: bold;
    font-size: var(--projectTitleTextFSize);
    color: var(--projectTitleTextFColor);
    vertical-align: top; }

  /*_Project Title*/
  /*_Project Title and Login User Details*/
  div.rolayout_RoClass > div.mainmecha_RoClass > .mainmechaCon_RoClass > .projTitleAndUserLogin_RoClass {
    position: relative;
    display: flex;
    overflow: visible;
    box-sizing: border-box;
    border: 1px solid transparent;
    flex-flow: row wrap;
    /*changed*/
    align-items: center;
    justify-content: space-between;
    /*changed*/
    width: 100%; }

  .projTitleTxt_RoClass {
    position: relative;
    display: block;
    overflow: visible;
    box-sizing: border-box;
    border: 1px solid transparent;
    white-space: normal;
    width: auto;
    font-family: calibri;
    font-style: normal;
    font-weight: bold;
    font-size: var(--projectTitleTextFSize);
    color: var(--projectTitleTextFColor);
    padding: 5px; }

  .userLogin_RoClass {
    position: relative;
    display: flex;
    overflow: visible;
    box-sizing: border-box;
    border: 1px solid transparent;
    flex-flow: row nowrap;
    width: auto; }

  .userLoginIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    border: 1px solid transparent;
    width: var(--projectTitleUserIconSize);
    height: var(--projectTitleUserIconSize);
    flex-shrink: 0;
    margin-right: 3px; }

  .userLoginIconWrap_RoClass > img {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%; }

  .userLoginDetails_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    border: 1px solid transparent;
    white-space: normal;
    width: auto;
    font-family: calibri;
    font-style: normal;
    font-weight: bold;
    font-size: var(--projectTitleTextFSize);
    color: var(--projectTitleTextFColor);
    align-self: center; }

  /*_Project Title and Login User Details*/
  /*Main Side*/ }
/*Laptop*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Dekstop*/
@media all and (min-width: 1601px) {
  /*Layout itself*/
  div.rolayout_RoClass {
    position: fixed;
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
    flex-flow: row nowrap;
    width: 100%;
    height: 100%; }

  /*Layout itself*/
  /*Left Side Item*/
  div.rolayout_RoClass > div.sidemecha_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    direction: rtl;
    width: 270px;
    /*270px changed (JS)*/
    height: 100%;
    flex-shrink: 0;
    background: var(--naviBgColor); }

  /* width */
  div.rolayout_RoClass > div.sidemecha_RoClass::-webkit-scrollbar {
    width: 7px;
    height: 7px; }

  /* Track */
  div.rolayout_RoClass > div.sidemecha_RoClass::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px gray;
    border-radius: 10px; }

  /* Handle */
  div.rolayout_RoClass > div.sidemecha_RoClass::-webkit-scrollbar-thumb {
    background: #4DAF4F;
    border-radius: 10px; }

  /* Handle on hover */
  div.rolayout_RoClass > div.sidemecha_RoClass::-webkit-scrollbar-thumb:hover {
    background: #4DAF4F; }

  div.rolayout_RoClass > div.sidemecha_RoClass > div.sidemechaCon_RoClass {
    position: relative;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    direction: ltr;
    width: auto;
    height: auto;
    background: none; }

  /*Left Side Item*/
  /*Navigation Menu*/
  .mainNavMenu_RoClass {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: visible;
    width: auto;
    cursor: pointer;
    flex-flow: row nowrap;
    align-items: center;
    text-decoration: none;
    background-color: var(--mainNavMenuBgColor);
    border-radius: 3px;
    font-size: var(--mainNavMenuFSize);
    font-style: normal;
    font-weight: normal;
    color: var(--mainNavMenuFColor);
    padding: var(--generalNavMenuPadding);
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s; }

  .activeMainNavMenu_RoClass {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: visible;
    width: auto;
    cursor: pointer;
    flex-flow: row nowrap;
    align-items: center;
    text-decoration: none;
    background-color: var(--hoverMainNavMenuBgColor);
    border-radius: 3px;
    font-size: var(--mainNavMenuFSize);
    font-style: normal;
    font-weight: normal;
    color: var(--hoverMainNavMenuFColor);
    padding: var(--generalNavMenuPadding);
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s; }

  .mainNavMenuIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--mainNavMenuIconSize);
    height: var(--mainNavMenuIconSize);
    flex-shrink: 0;
    background-color: transparent;
    background-image: var(--mainNavMenuIcon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }

  .activeMainNavMenuIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--mainNavMenuIconSize);
    height: var(--mainNavMenuIconSize);
    flex-shrink: 0;
    background-color: transparent;
    background-image: var(--activeMainNavMenuIcon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }

  .mainNavMenu_RoClass:hover {
    background-color: var(--hoverMainNavMenuBgColor);
    color: var(--hoverMainNavMenuFColor); }

  .mainNavMenu_RoClass:hover .mainNavMenuIconWrap_RoClass {
    background-image: var(--activeMainNavMenuIcon); }

  .generalNavMenuText_RoClass {
    position: relative;
    display: block;
    overflow: visible;
    box-sizing: border-box;
    white-space: normal;
    font-family: calibri;
    width: 100%;
    margin-left: 7px; }

  .chevronIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--chevronIconSize);
    height: var(--chevronIconSize);
    flex-shrink: 0;
    transform: rotate(0deg);
    transition: transform 0.1s;
    -webkit-transition: transform 0.1s; }

  .chevronIconWrap_RoClass > img {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%; }

  .activeChevronIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--chevronIconSize);
    height: var(--chevronIconSize);
    flex-shrink: 0;
    transform: rotate(90deg);
    transition: transform 0.1s;
    -webkit-transition: transform 0.1s; }

  .activeChevronIconWrap_RoClass > img {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%; }

  /*Navigation Menu*/
  /*Navigation Menus From Collapse or Sub Menu*/
  .subNavMenuWrap_RoClass {
    position: relative;
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--subNavMenuWrapBgColor);
    transition: max-height 0.5s;
    -webkit-transition: max-height 0.5s; }

  .subNavMenu_RoClass {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: visible;
    width: auto;
    cursor: pointer;
    flex-flow: row nowrap;
    align-items: center;
    text-decoration: none;
    background-color: var(--subNavMenuBgColor);
    border-radius: 3px;
    font-size: var(--subNavMenuFSize);
    font-style: normal;
    font-weight: normal;
    color: var(--subNavMenuFColor);
    padding: var(--generalNavMenuPadding);
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s; }

  .activeSubNavMenu_RoClass {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: visible;
    width: auto;
    cursor: pointer;
    flex-flow: row nowrap;
    align-items: center;
    text-decoration: none;
    background-color: var(--hoverSubNavMenuBgColor);
    border-radius: 3px;
    font-size: var(--subNavMenuFSize);
    font-style: normal;
    font-weight: normal;
    color: var(--hoverSubNavMenuFColor);
    padding: var(--generalNavMenuPadding);
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s; }

  .subNavMenuIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--subNavMenuIconSize);
    height: var(--subNavMenuIconSize);
    flex-shrink: 0;
    background-color: transparent;
    background-image: var(--subNavMenuIcon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }

  .activeSubNavMenuIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    width: var(--subNavMenuIconSize);
    height: var(--subNavMenuIconSize);
    flex-shrink: 0;
    background-color: transparent;
    background-image: var(--activeSubNavMenuIcon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }

  .subNavMenu_RoClass:hover {
    background-color: var(--hoverSubNavMenuBgColor);
    color: var(--hoverSubNavMenuFColor); }

  .subNavMenu_RoClass:hover .subNavMenuIconWrap_RoClass {
    background-image: var(--activeSubNavMenuIcon); }

  /*Navigation Menus From Collapse Or Sub Menu*/
  /*Main Side*/
  div.rolayout_RoClass > div.mainmecha_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: auto;
    width: 100%;
    height: auto;
    background-color: var(--mainBodyBgColor); }

  /* width */
  div.rolayout_RoClass > div.mainmecha_RoClass::-webkit-scrollbar {
    width: 7px;
    height: 7px; }

  /* Track */
  div.rolayout_RoClass > div.mainmecha_RoClass::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px gray;
    border-radius: 10px; }

  /* Handle */
  div.rolayout_RoClass > div.mainmecha_RoClass::-webkit-scrollbar-thumb {
    background: #03fce3;
    border-radius: 10px; }

  /* Handle on hover */
  div.rolayout_RoClass > div.mainmecha_RoClass::-webkit-scrollbar-thumb:hover {
    background: #03fce3; }

  div.rolayout_RoClass > div.mainmecha_RoClass > div.mainmechaCon_RoClass {
    position: relative;
    display: block;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    width: auto; }

  /*_Burger*/
  div.rolayout_RoClass > div.mainmecha_RoClass > .mainmechaCon_RoClass > div.burger_RoClass {
    position: relative;
    display: none;
    /*changed*/
    box-sizing: border-box;
    overflow: visible;
    width: 32px;
    /*changed*/
    height: 32px;
    /*changed*/
    cursor: pointer; }

  div.rolayout_RoClass > div.mainmecha_RoClass > .mainmechaCon_RoClass > div.burger_RoClass > img.burgerIcon_RoClass {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%; }

  /*_Burger*/
  /*_Project Title*/
  div.rolayout_RoClass > div.mainmecha_RoClass > .layoutOneHead_RoClass {
    padding: 8px;
    white-space: nowrap;
    background-color: var(--projectTitle_BgColor); }

  div.rolayout_RoClass > div.mainmecha_RoClass > .mainmechaCon_RoClass > .projectTitle_RoClass {
    position: relative;
    display: inline-block;
    /*changed*/
    box-sizing: border-box;
    overflow: hidden;
    white-space: normal;
    word-break: keep-all;
    padding-right: 5px;
    font-family: calibri;
    font-style: normal;
    font-weight: bold;
    font-size: var(--projectTitleTextFSize);
    color: var(--projectTitleTextFColor);
    vertical-align: top; }

  /*_Project Title*/
  /*_Project Title and Login User Details*/
  div.rolayout_RoClass > div.mainmecha_RoClass > .mainmechaCon_RoClass > .projTitleAndUserLogin_RoClass {
    position: relative;
    display: flex;
    overflow: visible;
    box-sizing: border-box;
    border: 1px solid transparent;
    flex-flow: row wrap;
    /*changed*/
    align-items: center;
    justify-content: space-between;
    /*changed*/
    width: 100%; }

  .projTitleTxt_RoClass {
    position: relative;
    display: block;
    overflow: visible;
    box-sizing: border-box;
    border: 1px solid transparent;
    white-space: normal;
    width: auto;
    font-family: calibri;
    font-style: normal;
    font-weight: bold;
    font-size: var(--projectTitleTextFSize);
    color: var(--projectTitleTextFColor);
    padding: 5px; }

  .userLogin_RoClass {
    position: relative;
    display: flex;
    overflow: visible;
    box-sizing: border-box;
    border: 1px solid transparent;
    flex-flow: row nowrap;
    width: auto; }

  .userLoginIconWrap_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    border: 1px solid transparent;
    width: var(--projectTitleUserIconSize);
    height: var(--projectTitleUserIconSize);
    flex-shrink: 0;
    margin-right: 3px; }

  .userLoginIconWrap_RoClass > img {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%; }

  .userLoginDetails_RoClass {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    border: 1px solid transparent;
    white-space: normal;
    width: auto;
    font-family: calibri;
    font-style: normal;
    font-weight: bold;
    font-size: var(--projectTitleTextFSize);
    color: var(--projectTitleTextFColor);
    align-self: center; }

  /*_Project Title and Login User Details*/
  /*Main Side*/ }
/*Dekstop*/
/***********************************************************************************************************************************************************************************************************/
/*Layout one design RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Footer RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/*General Medial*/
hr.linethis_RoClass {
  visibility: hidden; }

div.footerWrap_RoClass {
  position: fixed;
  box-sizing: border-box;
  overflow: visible;
  white-space: normal;
  word-break: keep-all;
  bottom: 0px;
  left: 0px;
  background: var(--footerBgColor);
  width: 100%;
  text-align: center; }

div.footerWrap_RoClass > span.footerTxt_RoClass {
  font-style: normal;
  font-weight: normal;
  font-family: calibri;
  font-size: var(--footerFSize);
  color: var(--footerFColor); }

/*General Medial*/
/***********************************************************************************************************************************************************************************************************/
/*Footer RoStrap Mixin*/
/***********************************************************************************************************************************************************************************************************/
/*Import*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Page Content*/
/*Page Content*/
/***********************************************************************************************************************************************************************************************************/
/*Import Mixins*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Root*/
:root {
  --cusCheckboxFStyle: normal;
  --cusCheckboxFWeight: normal;
  --cusCheckboxColor: black;
  --cusCheckboxBorderWidth: 1px;
  --cusCheckboxBorderColor: gray;
  --spinnerWidthHeight: 75px; }

body {
  background-color: #E8EFFF;
  background-image: url("../../src/sampleformbg.jpg");
  background-position: center;
  background-size: contain; }

/*Root*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Page Header*/
/***********************************************************************************************************************************************************************************************************/
/*Mobile*/
@media all and (max-width: 641px) {
  .pageHeaderWrap {
    position: relative;
    display: block;
    overflow: visible;
    box-sizing: border-box;
    background-color: transparent;
    height: auto; }

  .pageHeaderWrap .pageHeaderItem {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    flex-shrink: 0;
    width: auto;
    height: auto; }

  .pageHeaderBg-Class {
    background: var(--pageHeaderBackground) center no-repeat;
    background-size: cover;
    /*changed*/ }

  .pageHeaderWrap .pageHeaderTxt {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    word-break: keep-all;
    font: normal bold 22px verdana;
    /*To be changed*/
    color: #ffffff;
    max-width: 300px;
    /*To be changed*/
    padding: 8px 10px; }

  .pageHeaderWrap .pageHeaderSubtxt {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    word-break: keep-all;
    font: normal normal 16px calibri;
    /*To be changed*/
    color: #ffffff;
    max-width: 300px;
    /*To be changed*/
    padding: 0px 10px 10px 10px; } }
/*Mobile*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Tablet*/
@media all and (min-width: 642px) and (max-width: 1080px) {
  .pageHeaderWrap {
    position: relative;
    display: block;
    overflow: visible;
    box-sizing: border-box;
    background-color: transparent;
    height: auto; }

  .pageHeaderWrap .pageHeaderItem {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    flex-shrink: 0;
    width: auto;
    height: auto; }

  .pageHeaderBg-Class {
    background: var(--pageHeaderBackground) center no-repeat;
    background-size: cover;
    /*changed*/ }

  .pageHeaderWrap .pageHeaderTxt {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    word-break: keep-all;
    font: normal bold 22px verdana;
    /*To be changed*/
    color: #ffffff;
    max-width: 300px;
    /*To be changed*/
    padding: 8px 10px; }

  .pageHeaderWrap .pageHeaderSubtxt {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    word-break: keep-all;
    font: normal normal 16px calibri;
    /*To be changed*/
    color: #ffffff;
    max-width: 300px;
    /*To be changed*/
    padding: 0px 10px 10px 10px; } }
/*Tablet*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Laptop*/
@media all and (min-width: 1081px) and (max-width: 1600px) {
  .pageHeaderWrap {
    position: relative;
    display: block;
    overflow: visible;
    box-sizing: border-box;
    background-color: transparent;
    height: auto; }

  .pageHeaderWrap .pageHeaderItem {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    flex-shrink: 0;
    width: auto;
    height: auto; }

  .pageHeaderBg-Class {
    background: var(--pageHeaderBackground) center no-repeat;
    background-size: cover;
    /*changed*/ }

  .pageHeaderWrap .pageHeaderTxt {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    word-break: keep-all;
    font: normal bold 28px verdana;
    /*changed*/
    color: #ffffff;
    max-width: auto;
    /*changed*/
    padding: 8px 60px; }

  .pageHeaderWrap .pageHeaderSubtxt {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    word-break: keep-all;
    font: normal normal 20px calibri;
    /*changed*/
    color: #ffffff;
    max-width: 720px;
    /*changed*/
    padding: 0px 60px 10px 60px; } }
/*Laptop*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Desktop*/
@media all and (min-width: 1601px) {
  .pageHeaderWrap {
    position: relative;
    display: block;
    overflow: visible;
    box-sizing: border-box;
    background-color: transparent;
    height: auto; }

  .pageHeaderWrap .pageHeaderItem {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    flex-shrink: 0;
    width: auto;
    height: auto; }

  .pageHeaderBg-Class {
    background: var(--pageHeaderBackground) center no-repeat;
    background-size: cover;
    /*changed*/ }

  .pageHeaderWrap .pageHeaderTxt {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    word-break: keep-all;
    font: normal bold 32px verdana;
    /*changed*/
    color: #ffffff;
    max-width: auto;
    /*changed*/
    padding: 8px 60px; }

  .pageHeaderWrap .pageHeaderSubtxt {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    word-break: keep-all;
    font: normal normal 24px calibri;
    /*changed*/
    color: #ffffff;
    max-width: 920px;
    /*changed*/
    padding: 0px 60px 10px 60px; } }
/*Desktop*/
/***********************************************************************************************************************************************************************************************************/
/*Page Header*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Page Content*/
/***********************************************************************************************************************************************************************************************************/
/*Mobile*/
@media all and (max-width: 641px) {
  .pageContentWrapFlex {
    position: relative;
    display: flex;
    overflow: visible;
    box-sizing: border-box;
    flex-flow: column nowrap;
    /*To be changed*/
    justify-content: flex-start;
    align-items: flex-start;
    width: auto;
    margin: 20px 0px 0px 0px; }

  /*Policy details side*/
  .policyDetailsItem {
    position: relative;
    box-sizing: border-box;
    overflow: visible; }

  /*_Policy date details*/
  .policyDateDetailsWrap {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    margin: 0px 5px; }

  .policyDateTxt {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    word-break: keep-all;
    font: italic normal 24px calibri;
    /*To be changed*/
    color: #303238; }

  .policyUpToDateTxt {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    font: normal normal 24px calibri;
    /*To be changed*/
    color: #303238; }

  /*_Policy date details*/
  /*_Policy big label*/
  .policyBigLabelTxt {
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    white-space: normal;
    word-break: keep-all;
    font: normal normal 30px calibri;
    /*To be changed*/
    color: #303238;
    margin: 25px 5px; }

  /*_Policy big label*/
  /*_Policy Paragraph*/
  .policyParagraph-Class {
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    white-space: normal;
    word-break: keep-all;
    margin: 0px 5px;
    font-family: calibri;
    font-size: 20px;
    /*To be changed*/
    font-style: normal;
    color: #303238; }

  /*_Policy Paragraph*/
  /*_Accept terms and agreement*/
  .policyAgreeTermsWrap {
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    margin: 15px 5px;
    text-align: center; }

  .agreeTermsCheckbox-Class {
    display: inline-block;
    max-width: 100%; }

  .boxme_RoClass {
    --cusCheckboxWidthHeight: 24px; }

  label[for="agreeTermsCheckbox-Id"] {
    --custCheckboxFSize: 24px;
    --cusCheckboxFStyle: normal;
    --cusCheckboxFWeight: normal;
    --custCheckboxFMTSize: 15px;
    --custCheckboxFLDSize: 18px;
    --cusCheckboxColor: black; }

  #rateOurServBtn-Id {
    --normBtnFSize: 24px; }

  .enabledBtn-Class {
    --normBtnPadding: 7px;
    --normBtnBorderWidth: 1px;
    --normBtnRadius: 7px;
    --normBtnFWeight: normal;
    --normBtnFcolor: #ffffff;
    --normBtnHovActFColor: #ffffff;
    --normBtnFSize: 24px;
    --normBtnWidth: auto;
    --normBtnBorderColor: #237DB6;
    --normBtnBgColor: #237DB6;
    --normBtnHovActBgColor: #0E8EF1; }

  .disabledBtn-Class {
    --normBtnPadding: 7px;
    --normBtnBorderWidth: 1px;
    --normBtnRadius: 7px;
    --normBtnFWeight: normal;
    --normBtnFcolor: #ffffff;
    --normBtnHovActFColor: #ffffff;
    --normBtnFSize: 24px;
    --normBtnWidth: auto;
    --normBtnBorderColor: gray;
    --normBtnBgColor: gray;
    --normBtnHovActBgColor: gray; }

  /*_Accept terms and agreement*/
  /*Policy details side*/
  /*Enter code modal*/
  .enterCodeModal-Class {
    --modalWidth: 75%;
    /*To be changed*/ }

  .enterCodeModal-Class .fieldsWrapFlex {
    position: relative;
    display: flex;
    overflow: visible;
    box-sizing: border-box;
    flex-flow: column nowrap;
    align-items: center; }

  .fieldsWrapFlex .message-Class {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    margin-bottom: 5px;
    word-break: keep-all;
    font-family: calibri;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    font-size: 16px;
    /*To be changed*/ }

  /*Enter code modal*/ }
/*Mobile*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Tablet*/
@media all and (min-width: 642px) and (max-width: 1080px) {
  .pageContentWrapFlex {
    position: relative;
    display: flex;
    overflow: visible;
    box-sizing: border-box;
    flex-flow: column nowrap;
    /*To be changed*/
    justify-content: flex-start;
    align-items: flex-start;
    width: auto;
    margin: 20px 0px 0px 0px; }

  /*Policy details side*/
  .policyDetailsItem {
    position: relative;
    box-sizing: border-box;
    overflow: visible; }

  /*_Policy date details*/
  .policyDateDetailsWrap {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    margin: 0px 5px; }

  .policyDateTxt {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    word-break: keep-all;
    font: italic normal 24px calibri;
    /*To be changed*/
    color: #303238; }

  .policyUpToDateTxt {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    font: normal normal 24px calibri;
    /*To be changed*/
    color: #303238; }

  /*_Policy date details*/
  /*_Policy big label*/
  .policyBigLabelTxt {
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    white-space: normal;
    word-break: keep-all;
    font: normal normal 30px calibri;
    /*To be changed*/
    color: #303238;
    margin: 25px 5px; }

  /*_Policy big label*/
  /*_Policy Paragraph*/
  .policyParagraph-Class {
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    white-space: normal;
    word-break: keep-all;
    margin: 0px 5px;
    font-family: calibri;
    font-size: 20px;
    /*To be changed*/
    font-style: normal;
    color: #303238; }

  /*_Policy Paragraph*/
  /*_Accept terms and agreement*/
  .policyAgreeTermsWrap {
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    margin: 15px 5px;
    text-align: center; }

  .agreeTermsCheckbox-Class {
    display: inline-block;
    max-width: 100%; }

  .boxme_RoClass {
    --cusCheckboxWidthHeight: 24px; }

  label[for="agreeTermsCheckbox-Id"] {
    --custCheckboxFSize: 24px;
    --cusCheckboxFStyle: normal;
    --cusCheckboxFWeight: normal;
    --custCheckboxFMTSize: 15px;
    --custCheckboxFLDSize: 18px;
    --cusCheckboxColor: black; }

  #rateOurServBtn-Id {
    --normBtnFSize: 24px; }

  .enabledBtn-Class {
    --normBtnPadding: 7px;
    --normBtnBorderWidth: 1px;
    --normBtnRadius: 7px;
    --normBtnFWeight: normal;
    --normBtnFcolor: #ffffff;
    --normBtnHovActFColor: #ffffff;
    --normBtnFSize: 24px;
    --normBtnWidth: auto;
    --normBtnBorderColor: #237DB6;
    --normBtnBgColor: #237DB6;
    --normBtnHovActBgColor: #0E8EF1; }

  .disabledBtn-Class {
    --normBtnPadding: 7px;
    --normBtnBorderWidth: 1px;
    --normBtnRadius: 7px;
    --normBtnFWeight: normal;
    --normBtnFcolor: #ffffff;
    --normBtnHovActFColor: #ffffff;
    --normBtnFSize: 24px;
    --normBtnWidth: auto;
    --normBtnBorderColor: gray;
    --normBtnBgColor: gray;
    --normBtnHovActBgColor: gray; }

  /*_Accept terms and agreement*/
  /*Policy details side*/
  /*Enter code modal*/
  .enterCodeModal-Class {
    --modalWidth: 350px;
    /*changed*/ }

  .enterCodeModal-Class .fieldsWrapFlex {
    position: relative;
    display: flex;
    overflow: visible;
    box-sizing: border-box;
    flex-flow: column nowrap;
    align-items: center; }

  .fieldsWrapFlex .message-Class {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    margin-bottom: 5px;
    word-break: keep-all;
    font-family: calibri;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    font-size: 16px;
    /*To be changed*/ }

  /*Enter code modal*/ }
/*Tablet*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Laptop*/
@media all and (min-width: 1081px) and (max-width: 1600px) {
  .pageContentWrapFlex {
    position: relative;
    display: flex;
    overflow: visible;
    box-sizing: border-box;
    flex-flow: row nowrap;
    /*changed*/
    justify-content: flex-start;
    align-items: flex-start;
    width: 1080px;
    /*changed*/
    margin: 20px auto 0px auto; }

  /*Policy details side*/
  .policyDetailsItem {
    position: relative;
    box-sizing: border-box;
    overflow: visible; }

  /*_Policy date details*/
  .policyDateDetailsWrap {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    margin: 0px 5px; }

  .policyDateTxt {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    word-break: keep-all;
    font: italic normal 26px calibri;
    /*changed*/
    color: #303238; }

  .policyUpToDateTxt {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    font: normal normal 26px calibri;
    /*changed*/
    color: #303238; }

  /*_Policy date details*/
  /*_Policy big label*/
  .policyBigLabelTxt {
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    white-space: normal;
    word-break: keep-all;
    font: normal normal 35px calibri;
    /*changed*/
    color: #303238;
    margin: 25px 5px; }

  /*_Policy big label*/
  /*_Policy Paragraph*/
  .policyParagraph-Class {
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    white-space: normal;
    word-break: keep-all;
    margin: 0px 5px;
    font-family: calibri;
    font-size: 22px;
    /*changed*/
    font-style: normal;
    color: #303238; }

  /*_Policy Paragraph*/
  /*_Accept terms and agreement*/
  .policyAgreeTermsWrap {
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    margin: 15px 5px;
    text-align: center; }

  .agreeTermsCheckbox-Class {
    display: inline-block;
    max-width: 100%; }

  .boxme_RoClass {
    --cusCheckboxWidthHeight: 26px; }

  label[for="agreeTermsCheckbox-Id"] {
    --custCheckboxFSize: 26px;
    --cusCheckboxFStyle: normal;
    --cusCheckboxFWeight: normal;
    --custCheckboxFMTSize: 15px;
    --custCheckboxFLDSize: 18px;
    --cusCheckboxColor: black; }

  #rateOurServBtn-Id {
    --normBtnFSize: 26px; }

  .enabledBtn-Class {
    --normBtnPadding: 7px;
    --normBtnBorderWidth: 1px;
    --normBtnRadius: 7px;
    --normBtnFWeight: normal;
    --normBtnFcolor: #ffffff;
    --normBtnHovActFColor: #ffffff;
    --normBtnFSize: 26px;
    --normBtnWidth: auto;
    --normBtnBorderColor: #237DB6;
    --normBtnBgColor: #237DB6;
    --normBtnHovActBgColor: #0E8EF1; }

  .disabledBtn-Class {
    --normBtnPadding: 7px;
    --normBtnBorderWidth: 1px;
    --normBtnRadius: 7px;
    --normBtnFWeight: normal;
    --normBtnFcolor: #ffffff;
    --normBtnHovActFColor: #ffffff;
    --normBtnFSize: 26px;
    --normBtnWidth: auto;
    --normBtnBorderColor: gray;
    --normBtnBgColor: gray;
    --normBtnHovActBgColor: gray; }

  /*_Accept terms and agreement*/
  /*Policy details side*/
  /*Enter code modal*/
  .enterCodeModal-Class {
    --modalWidth: 350px;
    /*changed*/ }

  .enterCodeModal-Class .fieldsWrapFlex {
    position: relative;
    display: flex;
    overflow: visible;
    box-sizing: border-box;
    flex-flow: column nowrap;
    align-items: center; }

  .fieldsWrapFlex .message-Class {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    margin-bottom: 5px;
    word-break: keep-all;
    font-family: calibri;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    font-size: 18px;
    /*changed*/ }

  /*Enter code modal*/ }
/*Laptop*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Desktop*/
@media all and (min-width: 1601px) {
  .pageContentWrapFlex {
    position: relative;
    display: flex;
    overflow: visible;
    box-sizing: border-box;
    flex-flow: row nowrap;
    /*changed*/
    justify-content: flex-start;
    align-items: flex-start;
    width: 1080px;
    /*changed*/
    margin: 20px auto 0px auto; }

  /*Policy details side*/
  .policyDetailsItem {
    position: relative;
    box-sizing: border-box;
    overflow: visible; }

  /*_Policy date details*/
  .policyDateDetailsWrap {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    margin: 0px 5px; }

  .policyDateTxt {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    font: italic normal 28px calibri;
    /*changed*/
    color: #303238; }

  .policyUpToDateTxt {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    font: normal normal 28px calibri;
    /*changed*/
    color: #303238; }

  /*_Policy date details*/
  /*_Policy big label*/
  .policyBigLabelTxt {
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    white-space: normal;
    word-break: keep-all;
    font: normal normal 40px calibri;
    /*changed*/
    color: #303238;
    margin: 25px 5px; }

  /*_Policy big label*/
  /*_Policy Paragraph*/
  .policyParagraph-Class {
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    white-space: normal;
    word-break: keep-all;
    margin: 0px 5px;
    font-family: calibri;
    font-size: 24px;
    /*changed*/
    font-style: normal;
    color: #303238; }

  /*_Policy Paragraph*/
  /*_Accept terms and agreement*/
  .policyAgreeTermsWrap {
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    margin: 15px 5px;
    text-align: center; }

  .agreeTermsCheckbox-Class {
    display: inline-block;
    max-width: 100%; }

  .boxme_RoClass {
    --cusCheckboxWidthHeight: 28px; }

  label[for="agreeTermsCheckbox-Id"] {
    --custCheckboxFSize: 28px;
    --cusCheckboxFStyle: normal;
    --cusCheckboxFWeight: normal;
    --custCheckboxFMTSize: 15px;
    --custCheckboxFLDSize: 18px;
    --cusCheckboxColor: black; }

  #rateOurServBtn-Id {
    --normBtnFSize: 28px; }

  .enabledBtn-Class {
    --normBtnPadding: 7px;
    --normBtnBorderWidth: 1px;
    --normBtnRadius: 7px;
    --normBtnFWeight: normal;
    --normBtnFcolor: #ffffff;
    --normBtnHovActFColor: #ffffff;
    --normBtnFSize: 28px;
    --normBtnWidth: auto;
    --normBtnBorderColor: #237DB6;
    --normBtnBgColor: #237DB6;
    --normBtnHovActBgColor: #0E8EF1; }

  .disabledBtn-Class {
    --normBtnPadding: 7px;
    --normBtnBorderWidth: 1px;
    --normBtnRadius: 7px;
    --normBtnFWeight: normal;
    --normBtnFcolor: #ffffff;
    --normBtnHovActFColor: #ffffff;
    --normBtnFSize: 28px;
    --normBtnWidth: auto;
    --normBtnBorderColor: gray;
    --normBtnBgColor: gray;
    --normBtnHovActBgColor: gray; }

  /*_Accept terms and agreement*/
  /*Policy details side*/
  /*Enter code modal*/
  .enterCodeModal-Class {
    --modalWidth: 350px;
    /*changed*/ }

  .enterCodeModal-Class .fieldsWrapFlex {
    position: relative;
    display: flex;
    overflow: visible;
    box-sizing: border-box;
    flex-flow: column nowrap;
    align-items: center; }

  .fieldsWrapFlex .message-Class {
    position: relative;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    margin-bottom: 5px;
    word-break: keep-all;
    font-family: calibri;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    font-size: 20px;
    /*changed*/ }

  /*Enter code modal*/ }
/*Desktop*/
/***********************************************************************************************************************************************************************************************************/
/*Page Content*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Rogrid Library*/
/***********************************************************************************************************************************************************************************************************/
/*Mobile*/
@media all and (max-width: 641px) {
  /*Modal*/
  .modalme_RoClass {
    --modalHeight: auto;
    --modalBorderColor: #008080;
    --modalBodyBgColor: #ffffff;
    --modalTop: 70px;
    /*--modalWidth: declare to element;*/ }

  .modalme_RoClass .modalHeader_RoClass {
    --modalHeaderBgColor: #008080;
    --modalHeaderFSize: 16px;
    /*To be changed*/
    --modalHeaderFColor: #ffffff; }

  .modalHeader_RoClass .modalHeadTxt_RoClass {
    --modalHeaderFColor: #ffffff;
    --modalHeaderFSize: 16px;
    /*To be changed*/ }

  .modalHeader_RoClass .modalHeadClose_RoClass {
    --modalCloseIconSize: 16px;
    /*To be changed*/ }

  /*Modal*/
  /*Input field*/
  .cusInputs_RoClass, .cusInputs_RoClass input, .cusInputs_RoClass .placeholdme_RoClass, .cusInputs_RoClass .upPlaceholdme_RoClass {
    --customInputColor: black; }

  .cusInputs_RoClass input {
    --customInputFSize: 15px;
    /*To be changed*/ }

  .cusInputs_RoClass .placeholdme_RoClass, .cusInputs_RoClass .upPlaceholdme_RoClass {
    --customInputAnimFSize: 12px;
    /*To be changed*/ }

  /*Input field*/
  /*Normal Button*/
  .normButton_RoClass {
    --normBtnWidth: auto;
    --normBtnPadding: 4px;
    --normBtnBorderWidth: 1px;
    --normBtnBorderColor: #285FF3;
    --normBtnRadius: 4px;
    --normBtnFWeight: normal;
    --normBtnBgColor: #285FF3;
    --normBtnFcolor: #ffffff;
    --normBtnHovActFColor: #ffffff;
    --normBtnHovActBgColor: #1B85BD;
    --normBtnFSize: 15px;
    /*To be changed*/ }

  /*Normal Button*/
  /*Notification*/
  .notifyMessItem_Suc_RoClass, .notifyMessItem_Failed_RoClass {
    --notiFSize: 16px;
    /*To be changed*/ }

  .notifyCloseItem_Suc_RoClass, .notifyCloseItem_Failed_RoClass {
    --notiCloseIconWidthHeight: 16px;
    /*To be changed*/ }

  /*Notification*/ }
/*Mobile*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Tablet*/
@media all and (min-width: 642px) and (max-width: 1080px) {
  /*Modal*/
  .modalme_RoClass {
    --modalHeight: auto;
    --modalBorderColor: #008080;
    --modalBodyBgColor: #ffffff;
    --modalTop: 70px;
    /*--modalWidth: declare to element;*/ }

  .modalme_RoClass .modalHeader_RoClass {
    --modalHeaderBgColor: #008080;
    --modalHeaderFSize: 16px;
    /*To be changed*/
    --modalHeaderFColor: #ffffff; }

  .modalHeader_RoClass .modalHeadTxt_RoClass {
    --modalHeaderFColor: #ffffff;
    --modalHeaderFSize: 16px;
    /*To be changed*/ }

  .modalHeader_RoClass .modalHeadClose_RoClass {
    --modalCloseIconSize: 16px;
    /*To be changed*/ }

  /*Modal*/
  /*Input field*/
  .cusInputs_RoClass, .cusInputs_RoClass input, .cusInputs_RoClass .placeholdme_RoClass, .cusInputs_RoClass .upPlaceholdme_RoClass {
    --customInputColor: black; }

  .cusInputs_RoClass input {
    --customInputFSize: 15px;
    /*To be changed*/ }

  .cusInputs_RoClass .placeholdme_RoClass, .cusInputs_RoClass .upPlaceholdme_RoClass {
    --customInputAnimFSize: 12px;
    /*To be changed*/ }

  /*Input field*/
  /*Normal Button*/
  .normButton_RoClass {
    --normBtnWidth: auto;
    --normBtnPadding: 4px;
    --normBtnBorderWidth: 1px;
    --normBtnBorderColor: #285FF3;
    --normBtnRadius: 4px;
    --normBtnFWeight: normal;
    --normBtnBgColor: #285FF3;
    --normBtnFcolor: #ffffff;
    --normBtnHovActFColor: #ffffff;
    --normBtnHovActBgColor: #1B85BD;
    --normBtnFSize: 15px;
    /*To be changed*/ }

  /*Normal Button*/
  /*Notification*/
  .notifyMessItem_Suc_RoClass, .notifyMessItem_Failed_RoClass {
    --notiFSize: 16px;
    /*To be changed*/ }

  .notifyCloseItem_Suc_RoClass, .notifyCloseItem_Failed_RoClass {
    --notiCloseIconWidthHeight: 16px;
    /*To be changed*/ }

  /*Notification*/ }
/*Tablet*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Laptop*/
@media all and (min-width: 1081px) and (max-width: 1600px) {
  /*Modal*/
  .modalme_RoClass {
    --modalHeight: auto;
    --modalBorderColor: #008080;
    --modalBodyBgColor: #ffffff;
    --modalTop: 70px;
    /*--modalWidth: declare to element;*/ }

  .modalme_RoClass .modalHeader_RoClass {
    --modalHeaderBgColor: #008080;
    --modalHeaderFSize: 16px;
    /*To be changed*/
    --modalHeaderFColor: #ffffff; }

  .modalHeader_RoClass .modalHeadTxt_RoClass {
    --modalHeaderFColor: #ffffff;
    --modalHeaderFSize: 18px;
    /*changed*/ }

  .modalHeader_RoClass .modalHeadClose_RoClass {
    --modalCloseIconSize: 18px;
    /*changed*/ }

  /*Modal*/
  /*Input field*/
  .cusInputs_RoClass, .cusInputs_RoClass input, .cusInputs_RoClass .placeholdme_RoClass, .cusInputs_RoClass .upPlaceholdme_RoClass {
    --customInputColor: black; }

  .cusInputs_RoClass input {
    --customInputFSize: 17px;
    /*changed*/ }

  .cusInputs_RoClass .placeholdme_RoClass, .cusInputs_RoClass .upPlaceholdme_RoClass {
    --customInputAnimFSize: 14px;
    /*changed*/ }

  /*Input field*/
  /*Normal Button*/
  .normButton_RoClass {
    --normBtnWidth: auto;
    --normBtnPadding: 4px;
    --normBtnBorderWidth: 1px;
    --normBtnBorderColor: #285FF3;
    --normBtnRadius: 4px;
    --normBtnFWeight: normal;
    --normBtnBgColor: #285FF3;
    --normBtnFcolor: #ffffff;
    --normBtnHovActFColor: #ffffff;
    --normBtnHovActBgColor: #1B85BD;
    --normBtnFSize: 15px;
    /*To be changed*/ }

  /*Normal Button*/
  /*Notification*/
  .notifyMessItem_Suc_RoClass, .notifyMessItem_Failed_RoClass {
    --notiFSize: 18px;
    /*changed*/ }

  .notifyCloseItem_Suc_RoClass, .notifyCloseItem_Failed_RoClass {
    --notiCloseIconWidthHeight: 18px;
    /*changed*/ }

  /*Notification*/ }
/*Laptop*/
/***********************************************************************************************************************************************************************************************************/
/***********************************************************************************************************************************************************************************************************/
/*Desktop*/
@media all and (min-width: 1601px) {
  /*Modal*/
  .modalme_RoClass {
    --modalHeight: auto;
    --modalBorderColor: #008080;
    --modalBodyBgColor: #ffffff;
    --modalTop: 70px;
    /*--modalWidth: declare to element;*/ }

  .modalme_RoClass .modalHeader_RoClass {
    --modalHeaderBgColor: #008080;
    --modalHeaderFSize: 16px;
    /*To be changed*/
    --modalHeaderFColor: #ffffff; }

  .modalHeader_RoClass .modalHeadTxt_RoClass {
    --modalHeaderFColor: #ffffff;
    --modalHeaderFSize: 20px;
    /*changed*/ }

  .modalHeader_RoClass .modalHeadClose_RoClass {
    --modalCloseIconSize: 20px;
    /*changed*/ }

  /*Modal*/
  /*Input field*/
  .cusInputs_RoClass, .cusInputs_RoClass input, .cusInputs_RoClass .placeholdme_RoClass, .cusInputs_RoClass .upPlaceholdme_RoClass {
    --customInputColor: black; }

  .cusInputs_RoClass input {
    --customInputFSize: 19px;
    /*changed*/ }

  .cusInputs_RoClass .placeholdme_RoClass, .cusInputs_RoClass .upPlaceholdme_RoClass {
    --customInputAnimFSize: 16px;
    /*changed*/ }

  /*Input field*/
  /*Normal Button*/
  .normButton_RoClass {
    --normBtnWidth: auto;
    --normBtnPadding: 4px;
    --normBtnBorderWidth: 1px;
    --normBtnBorderColor: #285FF3;
    --normBtnRadius: 4px;
    --normBtnFWeight: normal;
    --normBtnBgColor: #285FF3;
    --normBtnFcolor: #ffffff;
    --normBtnHovActFColor: #ffffff;
    --normBtnHovActBgColor: #1B85BD;
    --normBtnFSize: 15px;
    /*To be changed*/ }

  /*Normal Button*/
  /*Notification*/
  .notifyMessItem_Suc_RoClass, .notifyMessItem_Failed_RoClass {
    --notiFSize: 20px;
    /*changed*/ }

  .notifyCloseItem_Suc_RoClass, .notifyCloseItem_Failed_RoClass {
    --notiCloseIconWidthHeight: 20px;
    /*changed*/ }

  /*Notification*/ }
/*Desktop*/
/***********************************************************************************************************************************************************************************************************/
/*Rogrid Library*/
/***********************************************************************************************************************************************************************************************************/

/*# sourceMappingURL=index.css.map */